From 490f824bed878a84c20e4f7c76e80a0cc027aacc Mon Sep 17 00:00:00 2001
From: Ujjwal Tiwari <ujjwaltiwari@Ujjwals-MacBook-Pro.local>
Date: Wed, 27 Mar 2024 22:14:54 +0530
Subject: [PATCH] feat: homepage ui with bb

---
 .../components/landingPage/LandingPage.tsx    | 52 ++++++-------------
 apps/dsep/pages/_app.tsx                      |  4 +-
 2 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/apps/dsep/components/landingPage/LandingPage.tsx b/apps/dsep/components/landingPage/LandingPage.tsx
index 1aa49adac..e30e85c40 100644
--- a/apps/dsep/components/landingPage/LandingPage.tsx
+++ b/apps/dsep/components/landingPage/LandingPage.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import Router from 'next/router'
+import { SearchInput } from '@beckn-ui/becknified-components'
+import { Box, Flex, Text, Image } from '@chakra-ui/react'
 
 import ImageCard from './ImageCard'
 import { useLanguage } from '../../hooks/useLanguage'
-import { Box, Flex, Text, Input, Image } from '@chakra-ui/react'
-
 import beckenFooter from '../../public/images/beckenFooterLogo.svg'
 import couresImageWhite from '../../public/images/landing-page-icons/CoursesWhite.svg'
 import coursesImageBlack from '../../public/images/landing-page-icons/CoursesBlack.svg'
@@ -29,6 +29,13 @@ const LandingPage: React.FC = () => {
     setActiveCard(type)
   }
 
+  const searchIconClickHandler = (e: any) => {
+    if (searchTerm) {
+      navigateToSearchResults()
+    }
+    e.preventDefault()
+  }
+
   return (
     <Box p={'20px'}>
       <Text
@@ -76,41 +83,16 @@ const LandingPage: React.FC = () => {
         ))}
       </Flex>
 
-      <Flex pt={'25px'}>
-        <Input
-          boxShadow="0px 0px 24px rgba(0, 0, 0, 0.10)"
-          borderRightRadius={'unset'}
-          p={'26px 15px'}
-          type="text"
+      <Box pt={'25px'}>
+        <SearchInput
           name="search_input"
-          placeholder={`Search for ${activeCard}`}
-          onChange={(e: React.BaseSyntheticEvent) => setSearchTerm(e.target.value)}
-          onKeyDown={event => event.key === 'Enter' && navigateToSearchResults()}
-          _focusVisible={{
-            borderColor: 'transparent',
-            boxShadow: 'transparent'
-          }}
+          onChangeHandler={(e: React.BaseSyntheticEvent) => setSearchTerm(e.target.value)}
+          searchIcon={'/images/searchIcon.svg'}
+          searchIconClickHandler={searchIconClickHandler}
+          onEnterHandler={(e: { key: string }) => e.key === 'Enter' && navigateToSearchResults()}
+          placeHolder={`Search for ${activeCard}`}
         />
-        <Flex
-          bg={'rgba(var(--color-primary))'}
-          borderRightRadius={'6px'}
-          boxShadow="0px 0px 24px rgba(0, 0, 0, 0.10)"
-          justifyContent={'center'}
-          alignItems="center"
-          width={'55px'}
-        >
-          <Image
-            src="/images/searchIcon.svg"
-            onClick={e => {
-              if (searchTerm) {
-                navigateToSearchResults()
-              }
-              e.preventDefault()
-            }}
-            alt={'search icon'}
-          />
-        </Flex>
-      </Flex>
+      </Box>
       <Flex
         justifyContent={'center'}
         alignItems="center"
diff --git a/apps/dsep/pages/_app.tsx b/apps/dsep/pages/_app.tsx
index 3999947eb..af7ac0145 100644
--- a/apps/dsep/pages/_app.tsx
+++ b/apps/dsep/pages/_app.tsx
@@ -33,9 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       theme={{
         color: {
           primary: '#3AA5E1',
-          secondary: '#84B3F9',
-          textPrimary: '#1A202C',
-          textSecondary: '#6B7280'
+          secondary: '#84B3F9'
         }
       }}
     >