feat(): Search article feature

Author: ar1603

src/components/ArticleCard/ArticleCard.tsx

@@ -32,14 +32,12 @@ const ArticleCard = ({
 
   return (
     <Box
-      zIndex={1}
       _hover={{
         transform: 'scale(1.02)',
         cursor: 'pointer',
       }}
       transition={'all 0.4s ease'}
-      bg={'rgba(0, 0, 0, 0.4)'}
-      backdropFilter={'blur(10px)'}
+      bg={'rgba(0, 0, 0, 0.2)'}
       padding={4}
       borderRadius={10}
       border={'1px solid gray'}

src/components/Chip/Chip.tsx

@@ -102,7 +102,7 @@ const Chip = ({ type, size = 'md' }: ChipProps) => {
       borderRadius="lg"
       border={`1px solid`}
       color="white"
-      zIndex={10}
+      zIndex={0}
     >
       <Text fontSize="sm">{ChipMap[type].title}</Text>
       {ChipMap[type].Icon({})}

src/components/CoverText/Cover.tsx

@@ -125,7 +125,7 @@ export const Cover = ({ children }: { children?: React.ReactNode }) => {
           },
         }}
         className={
-          'dark:text-white inline-block text-neutral-900 relative z-20 group-hover/cover:text-white transition duration-200'
+          'dark:text-white inline-block text-neutral-900 relative z-1 group-hover/cover:text-white transition duration-200'
         }
       >
         {children}

src/components/CoverText/CoverText.tsx

@@ -13,7 +13,7 @@ const CoverText = ({
 }) => {
   return (
     <Box position={'absolute'} left={32} top={'200px'}>
-      <Heading className="text-2xl md:text-4xl lg:text-6xl font-semibold max-w-7xl mx-auto  mt-6 relative z-20 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-neutral-700 to-neutral-700 dark:from-neutral-800 dark:via-white dark:to-white">
+      <Heading className="text-2xl md:text-4xl lg:text-6xl font-semibold max-w-7xl mx-auto  mt-6 relative z-1 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-neutral-700 to-neutral-700 dark:from-neutral-800 dark:via-white dark:to-white">
         <Text className="text-xl md:text-3xl lg:text-4xl pb-6">{text}</Text>
         <Cover>{highlightedText}</Cover>
       </Heading>

src/components/animateModal/AnimatedModal.tsx

@@ -94,13 +94,16 @@ export const ModalBody = ({
             opacity: 0,
             backdropFilter: 'blur(0px)',
           }}
-          className="fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full  flex items-center justify-center z-10"
+          className={
+            'fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full flex items-center justify-center z-100 ' +
+            className
+          }
         >
           <Overlay />
           <motion.div
             ref={modalRef}
             className={
-              'min-h-[50%] max-h-[90%] base:max-w-[60%] md:max-w-[47%] lg:max-w-[35%] bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'
+              'min-h-[50%] max-h-[90%] max-w-[60%]  bg-white dark:bg-neutral-950 border border-transparent dark:border-neutral-800 md:rounded-2xl relative z-10 flex flex-col flex-1 overflow-hidden'
             }
             initial={{
               opacity: 0,
@@ -138,8 +141,11 @@ export const ModalContent = ({ children }: { children: ReactNode }) => {
   return (
     <div
       className={
-        'flex flex-col flex-1 p-2 md:p-4 justify-center z-1000 w-[50%]'
+        'flex flex-col flex-1 p-2 md:p-4 justify-start z-100 w-[100%] '
       }
+      style={{
+        alignItems: 'center',
+      }}
     >
       {children}
     </div>
@@ -168,7 +174,7 @@ const Overlay = ({ className }: { className?: string }) => {
         opacity: 0,
         backdropFilter: 'blur(0px)',
       }}
-      className={`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-10 ${className}`}
+      className={`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-100 ${className}`}
     ></motion.div>
   );
 };

src/components/animateModal/Modal.tsx

@@ -1,39 +1,28 @@
-import ReactPlayer from 'react-player';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalTrigger,
 } from './AnimatedModal';
-import { Box, Button, Heading } from '@chakra-ui/react';
+import { Box, Heading } from '@chakra-ui/react';
 
 const AnimatedModal = ({
-  triggerText,
   title,
-  videoUrl,
-  websiteUrl,
+  triggerComponent,
+  children,
+  footer,
 }: {
-  triggerText: string;
   title: string;
-  videoUrl: string;
-  websiteUrl: string;
+  triggerComponent: React.ReactNode;
+  children: React.ReactNode;
+  footer: React.ReactNode;
 }) => {
   return (
-    <Box height={10} className="flex items-center justify-center">
+    <Box className="flex items-center justify-center">
       <Modal>
         <ModalTrigger className="bg-white flex justify-center group/modal-btn">
-          <Button
-            variant="outline"
-            colorScheme="white"
-            boxShadow={'0 0 10px 2px #ffffff5a'}
-            style={{
-              padding: '0.5rem 1rem',
-              borderRadius: '0.5rem',
-            }}
-          >
-            {triggerText}
-          </Button>
+          {triggerComponent}
         </ModalTrigger>
         <ModalBody>
           <ModalContent>
@@ -44,29 +33,9 @@ const AnimatedModal = ({
             >
               {title}
             </Heading>
-            <ReactPlayer
-              controls
-              progressInterval={1000}
-              previewTabIndex={0}
-              url={videoUrl}
-              style={{
-                justifyContent: 'center',
-                flex: 1,
-                borderRadius: '0.5rem',
-              }}
-            />
+            {children}
           </ModalContent>
-          <ModalFooter>
-            <Button
-              as="a"
-              href={websiteUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="px-2 py-1 bg-gray-200 text-black dark:bg-black dark:border-black dark:text-white border border-gray-300 rounded-md text-sm w-28"
-            >
-              Visit website
-            </Button>
-          </ModalFooter>
+          <ModalFooter>{footer}</ModalFooter>
         </ModalBody>
       </Modal>
     </Box>

src/screens/articles/ArticlesScreen.tsx

@@ -1,4 +1,4 @@
-import { Button, HStack, Text, VStack, Wrap } from '@chakra-ui/react';
+import { HStack, Text, VStack, Wrap } from '@chakra-ui/react';
 import { ArticleCard, LoadingSpinner } from '@components';
 import { useGetArticlesData } from '@services';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -7,6 +7,7 @@ import { useMemo, useState } from 'react';
 import { groupBy, sortBy } from 'lodash';
 import { BASE_NAV_ROUTE } from '@router';
 import SortBy, { SortByType } from './components/SortBy';
+import SearchFeature from './components/SearchFeature';
 
 const CategoryButton = ({
   category,
@@ -21,14 +22,13 @@ const CategoryButton = ({
 }) => {
   const navigate = useNavigate();
   return (
-    <Button
+    <Text
       w={'100%'}
       color={'white'}
-      py={3}
+      py={1}
       px={5}
       bg={isSelected ? 'gray.800' : ''}
       fontSize={20}
-      variant={'ghost'}
       border={'1px solid gray'}
       _hover={{ bg: 'gray.600', cursor: 'pointer', color: 'violet' }}
       onClick={() => {
@@ -39,7 +39,7 @@ const CategoryButton = ({
       }}
     >
       {category}
-    </Button>
+    </Text>
   );
 };
 
@@ -92,12 +92,12 @@ const ArticlesScreen = () => {
         w={'100%'}
         textAlign={'center'}
         top={2}
-        zIndex={2}
         padding={2}
         textShadow={'2px 2px 4px #000000'}
         borderBottom={'1px solid gray'}
         bg={'rgba(0, 0, 0, 0.5)'}
         backdropFilter={'blur(10px)'}
+        zIndex={10}
       >
         Articles
       </Text>
@@ -119,30 +119,32 @@ const ArticlesScreen = () => {
           <HStack>
             <StreakStalker dates={date} />
             <SortBy sortBy={sortByName} setSortBy={setSortBy} />
+            <SearchFeature data={articles} />
           </HStack>
-          <CategoryButton
-            category={'All'}
-            setCategory={setCategory}
-            secondPath={secondPath}
-            isSelected={'All' === category}
-          />
-          {Object.keys(filteredArticles).map(
-            (group_name: any, index: number) => (
-              <CategoryButton
-                key={index}
-                category={group_name}
-                setCategory={setCategory}
-                secondPath={secondPath}
-                isSelected={group_name === category}
-              />
-            ),
-          )}
+          <VStack>
+            <CategoryButton
+              category={'All'}
+              setCategory={setCategory}
+              secondPath={secondPath}
+              isSelected={'All' === category}
+            />
+            {Object.keys(filteredArticles).map(
+              (group_name: any, index: number) => (
+                <CategoryButton
+                  key={index}
+                  category={group_name}
+                  setCategory={setCategory}
+                  secondPath={secondPath}
+                  isSelected={group_name === category}
+                />
+              ),
+            )}
+          </VStack>
         </VStack>
         <VStack
           w={'80%'}
           id="projects"
           rowGap={20}
-          bg={'black'}
           paddingTop={20}
           justifyContent={'flex-start'}
         >

src/screens/articles/components/SearchFeature.tsx

@@ -0,0 +1,112 @@
+import { ArrowIcon, SearchIcon } from '@assets';
+import {
+  Box,
+  CloseButton,
+  HStack,
+  IconButton,
+  Input,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { AnimatedModal } from '@components';
+import { BASE_NAV_ROUTE } from '@router';
+import {
+  resetSearchTextSelector,
+  selectSearchText,
+  setSearchTextSelector,
+} from '@selectors';
+import { appStore } from '@store';
+import { isEmpty, isEqual, isNil } from 'lodash';
+import { memo } from 'react';
+
+const SearchFeature = ({ data }: { data: any }) => {
+  const searchText = appStore(selectSearchText);
+  const setSearchText = appStore(setSearchTextSelector);
+  const resetSearchText = appStore(resetSearchTextSelector);
+
+  const filteredArticle = data.filter((article: any) =>
+    !isNil(searchText) && !isEmpty(searchText)
+      ? ((article.title + article.description) as string).includes(searchText)
+      : false,
+  );
+
+  return (
+    <AnimatedModal
+      triggerComponent={
+        <Box
+          border={'1px solid gray'}
+          padding="2.5"
+          color={'white'}
+          borderRadius="100px"
+          bg={'rgba(255, 255, 255, 0.1)'}
+          backdropFilter={'blur(20px)'}
+          transition={'all 0.3s'}
+          _hover={{
+            transform: 'scale(1.1)',
+            cursor: 'pointer',
+          }}
+          p={2}
+        >
+          <SearchIcon />
+        </Box>
+      }
+      title="Search"
+      footer={
+        <Box color={'gray'}>Search for articles by title or description</Box>
+      }
+    >
+      <HStack
+        color={'white'}
+        w={'90%'}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Input
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+        />
+        <CloseButton onClick={resetSearchText} bg={'red'} />
+      </HStack>
+      <VStack overflow={'auto'} maxHeight={'40vh'} w={'100%'} mt={10}>
+        {filteredArticle.map((article: any) => (
+          <HStack
+            w={'70%'}
+            key={article.title}
+            padding={1}
+            border={'1px solid gray'}
+            m={1}
+            px={10}
+            color={'white'}
+            justifyContent={'space-between'}
+          >
+            <Text
+              fontSize="lg"
+              fontWeight="bold"
+              color="brand.900"
+              marginBottom={2}
+            >
+              {article.title}
+            </Text>
+            <IconButton
+              ml={4}
+              variant={'outline'}
+              colorScheme="white"
+              size={'sm'}
+              aria-label="Search database"
+              icon={<ArrowIcon />}
+              _hover={{
+                transform: 'scale(1.1)',
+              }}
+              as={'a'}
+              href={BASE_NAV_ROUTE + 'articles/' + article.article_key}
+              target={'_blank'}
+              rel={'noopener noreferrer'}
+            />
+          </HStack>
+        ))}
+      </VStack>
+    </AnimatedModal>
+  );
+};
+
+export default memo(SearchFeature, isEqual);