From 9756eb76dd9fc85bb092abefe25a98bc8bf99d79 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:30:49 +0200
Subject: [PATCH] add algolia search

---
 components/Search.tsx |  2 +-
 index.css             | 20 +++++++++++++++++++-
 theme.config.tsx      |  6 +++---
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/components/Search.tsx b/components/Search.tsx
index 87b39b2716..e8c8b60f38 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -3,7 +3,7 @@ import { DocSearch } from '@docsearch/react';
 import '@docsearch/css';
 
 const Search: React.FC = () => {
-  return <DocSearch appId="8XXXVNJ7UW" apiKey="3680aeb79049744c6629dd0abd2f5dfe" indexName="overextended" />;
+  return <DocSearch appId="8XXXVNJ7UW" apiKey="bf7661918f784d59105bc70fcc22bfb0" indexName="overextended" />;
 };
 
 export default Search;
diff --git a/index.css b/index.css
index d81809d00a..f240c15ed0 100644
--- a/index.css
+++ b/index.css
@@ -1,3 +1,4 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -34,6 +35,10 @@ ol.nx-list-decimal {
   --docsearch-primary-color: #0ea5e9;
 }
 
+.DocSearch--active {
+  overflow: unset !important;
+}
+
 .DocSearch-Modal {
   @apply !rounded-md shadow-none dark:bg-neutral-800;
 }
@@ -43,7 +48,20 @@ ol.nx-list-decimal {
 }
 
 .DocSearch-Search-Icon {
-  @apply !text-gray-800 dark:!text-gray-400;
+  @apply !text-gray-800 dark:!text-gray-400 !flex !items-center !justify-center;
+}
+
+.DocSearch-Screen-Icon {
+  @apply flex justify-center;
+}
+
+.DocSearch-Button-Keys {
+  height: 100%;
+  align-items: center;
+}
+
+.DocSearch-Button-Key {
+  top: 0;
 }
 
 .DocSearch-Button-Key {
diff --git a/theme.config.tsx b/theme.config.tsx
index bbac8919b5..393f351665 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -60,9 +60,9 @@ const config: DocsThemeConfig = {
   footer: {
     text: 'Overextended',
   },
-  // search: {
-  //   component: <Search />,
-  // },
+  search: {
+    component: <Search />,
+  },
   head: useHead,
   primaryHue: { dark: 200, light: 200 },
   sidebar: {