From 5646bc1c2b8535097629eab0fd86cb1818f286ef Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 28 Nov 2022 14:07:40 -0800
Subject: [PATCH] initialize Search component

using DocSearch component via @docsearch/react library
---
 src/components/UI/Header.tsx | 15 ++----------
 src/components/UI/Search.tsx | 45 ++++++++++++++++++++++++++++++++++++
 src/components/UI/index.ts   |  1 +
 3 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 src/components/UI/Search.tsx

diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 4df7e9ad65..de3c3ae607 100644
--- a/src/components/UI/Header.tsx
+++ b/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 */}
diff --git a/src/components/UI/Search.tsx b/src/components/UI/Search.tsx
new file mode 100644
index 0000000000..8b126ae8e9
--- /dev/null
+++ b/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>
+)
diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts
index edd3e095a6..fb67dcb3f2 100644
--- a/src/components/UI/index.ts
+++ b/src/components/UI/index.ts
@@ -2,3 +2,4 @@ export * from './ButtonLinkSecondary';
 export * from './DataTable';
 export * from './Header';
 export * from './PageMetadata';
+export * from './Search';