From 8da7f658aaebbe102097d031352c02a8f4e37ce3 Mon Sep 17 00:00:00 2001
From: boidushya <boidushyabhattacharya@gmail.com>
Date: Sun, 10 Oct 2021 20:09:47 +0530
Subject: [PATCH] feat: added search bar

---
 package-lock.json  | 19 +++++++++++++++++++
 src/App.css        | 44 ++++++++------------------------------------
 src/pages/index.js | 31 ++++++++++++++++++++++++++++---
 3 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dedfa91..5e411a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "winterly",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^1.4.1",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
@@ -1482,6 +1483,18 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.1.tgz",
+      "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -20686,6 +20699,12 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@headlessui/react": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.1.tgz",
+      "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==",
+      "requires": {}
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
diff --git a/src/App.css b/src/App.css
index 74b5e05..400a045 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,10 @@
-.App {
-  text-align: center;
+.absolute-search{
+	position:absolute;
+	top:0;
+	left:50%;
+	/* padding-top:1rem; */
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.w-third-screen {
+	width:33.33vw;
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 9a63c9c..723fe8a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,9 +9,16 @@ import About from "../components/about";
 function Home(props) {
   const [data, setData] = useState({});
   const [openAbout, setOpenAbout] = useState(false);
+  const [searchText, setSearchText] = useState("");
 
   const handleFullscreen = useFullScreenHandle();
 
+  const handleSearch = (e) => {
+    if (e.key === "Enter" && searchText.length){
+      window.location = `https://www.google.com/search?q=${searchText}`
+    }
+  }
+
   useEffect(() => {
     const update = async () => {
       imageHandler();
@@ -51,11 +58,29 @@ function Home(props) {
                 backgroundRepeat: "no-repeat",
               }}
             />
-            Any fullscreen content here
-            <div className="absolute bottom-5 left-5 flex flex-row w-100 text-sm text-white p-3 bg-opacity-10 bg-black">
+            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 p-3">
+              <div class="relative flex items-center w-third-screen h-12 rounded-md bg-opacity-20 bg-black overflow-hidden">
+                <div class="grid place-items-center h-full w-12 text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+
+                <input
+                  class="peer h-full w-full outline-none text-sm text-white pr-2 bg-transparent placeholder-gray-100"
+                  type="text"
+                  id="search"
+                  placeholder="Search something.."
+                  value={searchText}
+                  onChange={(e)=>setSearchText(e.target.value)}
+                  onKeyDown={handleSearch}
+                />
+              </div>
+            </div>
+            <div className="absolute bottom-5 left-5 flex flex-row w-100 text-sm text-white p-3 bg-opacity-20 bg-black rounded-sm">
               <Clock></Clock>
             </div>
-            <div className="absolute bottom-5 right-5 flex flex-row w-100 text-sm text-white p-3 bg-opacity-10 bg-black">
+            <div className="absolute bottom-5 right-5 flex flex-row w-100 text-sm text-white p-3 bg-opacity-20 bg-black rounded-sm">
               <span>
                 Photo by{" "}
                 <a