Added spotlight search UI

Author: siddharthmohite

app/routes/components/SpotLightSearch.jsx

@@ -1,8 +1,51 @@
-export default function SpotLightSearch(){
-    return(
 
-        <input>
-            
-        </input>
-    )
-}
+import { useState, useEffect } from "react";
+import SearchIcon from '../icons/SearchIcon';
+export default function SpotLightSearch()
+{
+     // Control the visibility of the overlay
+     const [isOpen, setIsOpen] = useState(true);
+   
+   
+   
+     // Toggle the overlay when user presses Ctrl+Space
+     useEffect(() => {
+       const handleKeyDown = (e) => {
+         // Check for Ctrl+Space
+         if (e.ctrlKey && e.code === 'Space') {
+           e.preventDefault();
+           setIsOpen((prev) => !prev);
+         }
+       };
+       window.addEventListener('keydown', handleKeyDown);
+       return () => window.removeEventListener('keydown', handleKeyDown);
+     }, []);
+   
+     // Close the overlay and reset the search
+     const handleClose = () => {
+       setIsOpen(false);
+     };
+   
+   
+  return (
+    <>
+      {isOpen && (
+        <div className="spotlight-overlay" onClick={handleClose}>
+          <div className="spotlight-container" onClick={(e) => e.stopPropagation()}>
+            <div className="spotlight-input-wrapper">
+                <div className="spotlight-icon">
+                    <SearchIcon dimension="33px" />
+                </div>
+                <input
+                type="text"
+                className="spotlight-input"
+                placeholder="Spotlight Search"
+                autoFocus
+                />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+          );
+        };

app/routes/homepage.tsx

@@ -15,6 +15,7 @@ import "app/routes/styles/ControlCenter.scss"
 import "app/routes/styles/SendAMessage.scss"
 import "app/routes/styles/Calculator.scss"
 import "app/routes/styles/Blog.scss"
+import "app/routes/styles/SpotLightSearch.scss"
 import Folder from './components/Folder'
 import Finder from './components/Finder'
 import AppleLogoMenu from './components/AppleLogoMenu'
@@ -23,6 +24,7 @@ import ControlCenter from './components/ControlCenter'
 import SendAMessage from './components/SendAMessage'
 import Calculator from './components/Calculator'
 import Blog from './components/Blog'
+import SpotLightSearch from './components/SpotLightSearch'
 import AppleLogoIcon from './icons/AppleLogoIcon'
 import BatteryIcon from './icons/BatteryIcon'
 import SearchIcon from './icons/SearchIcon'
@@ -49,6 +51,7 @@ export default function homepage(){
     const [currentTimeState, setCurrentTimeState] = useState("");
     const [appleButtonClicked,setAppleButtonClicked] = useState(false);
     const [batteryButtonClicked, setBatteryButtonClicked] = useState(false);
+    const [searchButtonClicked, setSearchButtonClicked] = useState(false);
     const [controlCenterButtonClicked, setControlCenterButtonClicked] = useState(false);
 
 
@@ -85,7 +88,11 @@ export default function homepage(){
     const handleBatteryButtonClick = () =>{
 
       setBatteryButtonClicked(!batteryButtonClicked);
-    } 
+    }
+    const handleSearchButtonClick = () =>{
+      setSearchButtonClicked(!searchButtonClicked);
+      console.log("search button clicked", searchButtonClicked)
+    }
 
     const handleControlButtonClick = () =>{
 
@@ -273,6 +280,10 @@ useEffect(() => {
             <BatteryMenu />
           </div>
         })
+        ({
+          searchButtonClicked &&
+            <SpotLightSearch />
+        })
         {( controlCenterButtonClicked &&
            <div className="controlcenter-container">
             {/* <FullScreenProvider> */}
@@ -379,9 +390,10 @@ useEffect(() => {
               <div className="overlay-topbar__wifi">
                 <WifiIcon  fill="rgba(0,0,0,1)" height="20px" width="20px"/>
               </div>
-              <div 
+              <div
+              onClick={handleSearchButtonClick} 
               className="overlay-topbar__search">
-                <SearchIcon />
+                <SearchIcon dimension="18px" />
               </div>
               <div 
               onClick={handleControlButtonClick}

app/routes/icons/SearchIcon.jsx

@@ -1,14 +1,14 @@
-export default function SearchIcon(){
+export default function SearchIcon({dimension}){
 
 
     return(
 
         <svg 
         xmlns="http://www.w3.org/2000/svg" 
-        height="21px" 
+        height={dimension}
         viewBox="0 -960 960 960" 
-        width="21px" 
-        fill="rgba(28,28,28)">
+        width={dimension}
+        fill="rgb(47, 46, 46)">
         <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l170 170-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
         />
         </svg>

app/routes/styles/SpotLightSearch.scss

@@ -0,0 +1,58 @@
+/* Overlay that covers the entire screen */
+.spotlight-overlay {
+    display: flex;
+    position: absolute;
+    top: 6rem;
+    left: 40%;
+    width: 100%;
+    z-index: 9999;
+  }
+  
+  /* The container for the search bar and results */
+  .spotlight-container {
+    background-color:  rgba(198, 198, 199, 0.5);
+    ;
+    width: 30%;
+    max-width: 500px;
+    border-radius: 15px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    mix-blend-mode: screen;
+
+  }
+  
+  /* The input field */
+  .spotlight-input {
+    width: 100%;
+    font-size: 1.5rem;
+    font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
+    font-weight: 100;
+    padding: 1px 1px;
+    // border: 1px solid #ccc;
+    border-radius: 15px;
+    outline: none;
+    box-sizing: border-box;
+
+    
+  }
+
+  .spotlight-input-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    background-color: #fefefe;
+    border: 1px solid #ccc;
+    border-radius: 15px;
+    padding: 4px 8px;
+    mix-blend-mode: screen;
+  }
+  .spotlight-icon{
+    margin-top: 0.2rem;
+  }
+  .text{
+    font-family: "SF-Pro Medium",-apple-system, BlinkMacSystemFont;
+    color:rgb(47, 46, 46,1);
+    font-weight: 500;
+    font-size: 1.6rem;
+  }
+