search page done

Co-authored-by: William Oldham <wegg7250@gmail.com>

src/index.css

@@ -4,5 +4,5 @@
 
 html,
 body {
-  @apply min-h-screen bg-dink-900 text-white font-open-sans;
+  @apply min-h-screen bg-denim-100 text-white font-open-sans;
 }

src2/components/SelectBox.js

@@ -1,41 +1,38 @@
-import { useRef, useState, useEffect } from "react"
-import "./SelectBox.css"
+import { useRef, useState, useEffect } from "react";
+import "./SelectBox.css";
 
 function Option({ option, ...props }) {
   return (
     <div className="option" {...props}>
-            <input
-                type="radio"
-                className="radio"
-                id={option.id} />
+      <input type="radio" className="radio" id={option.id} />
       <label htmlFor={option.id}>
         <div className="item">{option.name}</div>
       </label>
     </div>
-    )
+  );
 }
 
 export function SelectBox({ options, selectedItem, setSelectedItem }) {
   if (!Array.isArray(options)) {
-        throw new Error("Items must be an array!")
+    throw new Error("Items must be an array!");
   }
 
-    const [active, setActive] = useState(false)
+  const [active, setActive] = useState(false);
 
   const containerRef = useRef();
 
-    const handleClick = e => {
+  const handleClick = (e) => {
     if (containerRef.current.contains(e.target)) {
       // inside click
       return;
     }
     // outside click
-        closeDropdown()
+    closeDropdown();
   };
 
   const closeDropdown = () => {
-        setActive(false)
-    }
+    setActive(false);
+  };
 
   useEffect(() => {
     // add when mounted
@@ -48,35 +45,47 @@ export function SelectBox({ options, selectedItem, setSelectedItem }) {
   }, []);
 
   const onOptionClick = (e, option, i) => {
-        e.stopPropagation()
-        setSelectedItem(i)
-        closeDropdown()
-    }
+    e.stopPropagation();
+    setSelectedItem(i);
+    closeDropdown();
+  };
 
-    const handleSelectedKeyPress = event => {
-        if (event.code === 'Enter' || event.code === 'Space'){
-            setActive(a => !a);
-        }
+  const handleSelectedKeyPress = (event) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      setActive((a) => !a);
     }
+  };
 
-    const handleOptionKeyPress = (option, i) => event => {
-        if (event.code === 'Enter' || event.code === 'Space'){
+  const handleOptionKeyPress = (option, i) => (event) => {
+    if (event.code === "Enter" || event.code === "Space") {
       onOptionClick(event, option, i);
     }
-    }
+  };
 
   return (
-        <div className="select-box" ref={containerRef} onClick={() => setActive(a => !a)} >
-            <div className="selected" tabIndex={0} onKeyPress={handleSelectedKeyPress}>
-                {options ? (
-                    <Option option={options[selectedItem]} />
-                ) : null}
+    <div
+      className="select-box"
+      ref={containerRef}
+      onClick={() => setActive((a) => !a)}
+    >
+      <div
+        className="selected"
+        tabIndex={0}
+        onKeyPress={handleSelectedKeyPress}
+      >
+        {options ? <Option option={options[selectedItem]} /> : null}
       </div>
       <div className={"options-container" + (active ? " active" : "")}>
         {options.map((opt, i) => (
-                    <Option option={opt} key={i} onClick={(e) => onOptionClick(e, opt, i)} tabIndex={active ? 0 : undefined} onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined} />
+          <Option
+            option={opt}
+            key={i}
+            onClick={(e) => onOptionClick(e, opt, i)}
+            tabIndex={active ? 0 : undefined}
+            onKeyPress={active ? handleOptionKeyPress(opt, i) : undefined}
+          />
         ))}
       </div>
     </div>
-    )
+  );
 }