style draft 1 search

src/components/Search.css

+.search {
+  min-width: 320px;
+}
+.search .search-icon,
+.search .close-icon {
+  height: 25px;
+  width: 25px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+.search .search-icon {
+  margin-left: 245px;
+}
+
+.search .search-bar {
+  margin-right: 20px;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0);
+  border-bottom: 1px solid var(--dark-blue);
+  outline: 0;
+  color: var(--dark-blue);
+  font: var(--primary-font);
+}
+.search .dropdown {
+  position: absolute;
+  min-width: 250px;
+  min-height: 100px;
+  overflow: auto;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  top: 90px;
+  right: 67px;
+  /* padding: 10px; */
+  border-radius: 10px;
+  background-color: var(--light-blue);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}

src/components/Search.jsx

@@ -2,10 +2,12 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import pagesData from "../fullTextSearch";
+import "./Search.css";
 
 const Search = ({ pages = pagesData }) => {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
+  const [searchButton, setSearchButton] = useState(true);
   const navigate = useNavigate();
 
   // If required we can later use a fuzzy matching algorithm like Levenshtein distance
@@ -36,21 +38,42 @@ const Search = ({ pages = pagesData }) => {
     navigate(page); // This navigates to the specified page using react-router-dom
   };
 
-  return (
-    <div>
+  return searchButton ? (
+    // JSX for when searchButton is true
+    <div className="search">
+      <img
+        className="search-icon"
+        src="https://static.igem.wiki/teams/5125/search.png"
+        onClick={() => setSearchButton(false)}
+      ></img>
+    </div>
+  ) : (
+    // JSX for when searchButton is falses
+    <div className="search">
       <input
+        className="search-bar"
         type="text"
-        placeholder="Search..."
+        placeholder="Ask Coraline :)"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
       />
-      <ul>
-        {results.map((result, index) => (
-          <li key={index} onClick={() => handleResultClick(result.page)}>
-            {result.title}
-          </li>
-        ))}
-      </ul>
+
+      <img
+        className="close-icon"
+        src="https://static.igem.wiki/teams/5125/close.png"
+        onClick={() => setSearchButton(true)}
+      />
+      <div className="dropdown">
+        Check out:
+        <ul>
+          {results.map((result, index) => (
+            <li key={index} onClick={() => handleResultClick(result.page)}>
+              {result.title} &rarr;
+              {/* puts an arrow */}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };