initialize Search component

using DocSearch component via @docsearch/react library

src/components/UI/Header.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react';
 import NextLink from 'next/link';
 
 import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons';
+import { Search } from '../UI'
 import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants';
 
 export const Header: FC = () => {
@@ -74,23 +75,11 @@ export const Header: FC = () => {
 
         {/* SEARCH */}
         <Stack
-          p={4}
           display={{ base: 'none', md: 'block' }}
           borderRight='2px'
           borderColor='primary'
         >
-          <InputGroup>
-            <Input
-              variant='unstyled'
-              placeholder='search'
-              size='md'
-              _placeholder={{ color: 'primary', fontStyle: 'italic' }}
-            />
-
-            <Stack pl={4} justifyContent='center' alignItems='center'>
-              <LensIcon color='primary' />
-            </Stack>
-          </InputGroup>
+          <Search />
         </Stack>
 
         {/* DARK MODE SWITCH */}

src/components/UI/Search.tsx

@@ -0,0 +1,45 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+
+export const Search: React.FC<FlexProps> = (props) => (
+  <Flex
+    css={`
+      svg.DocSearch-Search-Icon path {
+        color: var(--chakra-colors-primary);
+      }
+      .DocSearch-Button {
+        border-radius: 0;
+        height: 100%;
+        background: none;
+        margin: 0;
+        padding: 1rem;
+        width: 200px;
+      }
+      .DocSearch-Button:hover {
+        background: none;
+      }
+      .DocSearch-Button-Container {
+        flex-direction: row-reverse;
+      }
+      .DocSearch-Button-Keys {
+        display: none;
+      }
+      .DocSearch-Button-Placeholder {
+        text-transform: lowercase;
+        font-style: italic;
+        color: var(--chakra-colors-primary);
+        font-weight: 400;
+        width: 100%;
+        flex: 1;
+      }
+    `}
+    {...props}
+  >
+    <DocSearch
+      appId="R2IYF7ETH7"
+      apiKey="599cec31baffa4868cae4e79f180729b"
+      indexName="docsearch" />
+  </Flex>
+)

src/components/UI/index.ts

@@ -2,3 +2,4 @@ export * from './ButtonLinkSecondary';
 export * from './DataTable';
 export * from './Header';
 export * from './PageMetadata';
+export * from './Search';