From 6bcf445848aa7885fbb1619b87d8368eb3735b3f Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Thu, 4 Apr 2024 21:49:58 +0800
Subject: [PATCH] structure: base components of search suggestions

---
 components/index.tsx                          |  4 ++++
 components/search/onesearch/onesearch.tsx     | 16 ++++++++++++++++
 components/search/onesearch/suggestion.tsx    |  4 ++--
 components/search/onesearch/suggestionBox.tsx |  3 ++-
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 components/search/onesearch/onesearch.tsx

diff --git a/components/index.tsx b/components/index.tsx
index 2011977..eadbc78 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -9,6 +9,9 @@ import { bgFocusState } from "./state/background";
 import Time from "./time";
 import loadSettings from "@/lib/loadSettings";
 import EngineSelector from "./search/engineSelector";
+import SuggestionBox from "./search/onesearch/suggestionBox";
+import Suggestion from "./search/onesearch/suggestion";
+import Onesearch from "./search/onesearch/onesearch";
 
 export default function Homepage() {
     const [settings, setSettings] = useRecoilState(settingsState);
@@ -45,6 +48,7 @@ export default function Homepage() {
             )}
             {colorScheme === "light" && <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />}
             <Search onFocus={() => setFocus(true)} />
+            <Onesearch />
         </div>
     );
 }
diff --git a/components/search/onesearch/onesearch.tsx b/components/search/onesearch/onesearch.tsx
new file mode 100644
index 0000000..ec27dde
--- /dev/null
+++ b/components/search/onesearch/onesearch.tsx
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import SuggestionBox from "./suggestionBox";
+import Suggestion from "./suggestion";
+
+export default function(){
+    const [suggestion, setSuggetsion] = useState([]);
+    return (
+        <SuggestionBox>
+            {
+                suggestion.map((s: string) => {
+                    return <Suggestion key={s}>{s}</Suggestion>
+                })
+            }
+        </SuggestionBox>
+    )
+}
\ No newline at end of file
diff --git a/components/search/onesearch/suggestion.tsx b/components/search/onesearch/suggestion.tsx
index 6051a52..76d25cd 100644
--- a/components/search/onesearch/suggestion.tsx
+++ b/components/search/onesearch/suggestion.tsx
@@ -1,6 +1,6 @@
-export default function(props: { children: React.ReactNode }) {
+export default function(props: { children: React.ReactNode }) {   
     return (
-        <div>
+        <div className={`w-full h-10 leading-10 bg-slate-200 dark:bg-zinc-800 hover:bg-zinc-700 px-5 z-10 cursor-pointer duration-100`}>
             <p>{props.children}</p>
         </div>
     );
diff --git a/components/search/onesearch/suggestionBox.tsx b/components/search/onesearch/suggestionBox.tsx
index f4224b5..b1d4fd9 100644
--- a/components/search/onesearch/suggestionBox.tsx
+++ b/components/search/onesearch/suggestionBox.tsx
@@ -1,6 +1,7 @@
 export default function(props: { children: React.ReactNode }) {
     return (
-        <div className="relative w-11/12 sm:w-[700px] h-auto left-1/2 translate-x-[-50%] top-72 z-10">
+        <div className="relative bg-slate-200 dark:bg-zinc-800 w-11/12 sm:w-[700px] h-auto left-1/2 
+        translate-x-[-50%] top-72 z-20 rounded overflow-hidden duration-250">
             {props.children}
         </div>
     );