structure: base components of search suggestions

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>
     );
 }

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>
+    )
+}

components/search/onesearch/suggestion.tsx

@@ -1,6 +1,6 @@
 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>
     );

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>
     );