feat(home): add spotlight search functionality

src/pages/student/Home.tsx

@@ -6,14 +6,7 @@ import {
   TabsContent,
 } from "../../components/ui/tabs";
 import { useAuthStore } from "../../stores/authStore";
-import {
-  CheckCircle,
-  DecimalsArrowRight,
-  DraftingCompass,
-  List,
-  Search,
-  SquarePen,
-} from "lucide-react";
+import { CheckCircle, Search } from "lucide-react";
 import { api } from "../../utils/api";
 import {
   Card,
@@ -28,8 +21,7 @@ import { Button } from "../../components/ui/button";
 import type { PracticeSheet } from "../../types/sheet";
 import { formatStatus } from "../../lib/utils";
 import { useNavigate } from "react-router-dom";
-import { Progress } from "../../components/ui/progress";
-import { Field, FieldLabel } from "../../components/ui/field";
+import { SearchOverlay } from "../../components/SearchOverlay";
 
 export const Home = () => {
   const user = useAuthStore((state) => state.user);
@@ -40,6 +32,9 @@ export const Home = () => {
   const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
   const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
 
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
   useEffect(() => {
     const sortPracticeSheets = (sheets: PracticeSheet[]) => {
       const notStarted = sheets.filter(
@@ -75,7 +70,6 @@ export const Home = () => {
         }
         const sheets = await api.getPracticeSheets(token, 1, 10);
         setPracticeSheets(sheets.data);
-        console.log("All Practice Sheets: ", sheets.data);
         sortPracticeSheets(sheets.data);
       } catch (error) {
         console.error("Error fetching practice sheets:", error);
@@ -94,66 +88,21 @@ export const Home = () => {
       <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
         Welcome, {user?.name || "Student"}
       </h1>
-
-      {/* <section className="border rounded-3xl p-5 space-y-4">
-        <p className="font-satoshi">
-          Your predictive SAT score is low. Take a practice test to increase
-          your scores now!
-        </p>
-      </section> */}
-      {/* <Card className="relative bg-linear-to-br from-red-600 to-red-700 rounded-4xl">
-        <div className="space-y-4">
-          <CardHeader className="">
-            <CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
-              Your score is low!
-            </CardTitle>
-          </CardHeader>
-
-          <CardContent className="space-y-4">
-            <Field className="w-full">
-              <FieldLabel htmlFor="progress-upload">
-                <span className="font-satoshi text-white">Score</span>
-                <span className="ml-auto font-satoshi text-white">
-                  854/1600
-                </span>
-              </FieldLabel>
-              <Progress value={55} id="progress-upload" max={100} />
-            </Field>
-            <p className="font-satoshi text-white">
-              Taking more practice tests can increase your score today!
-            </p>
-          </CardContent>
-          <CardFooter className="flex justify-between">
-            <Button
-              onClick={() => navigate("/student/analytics")}
-              className="bg-transparent border-2 py-3 px-5 text-md font-satoshi rounded-full"
-            >
-              <List />
-              View
-            </Button>
-            <Button className="bg-gray-50 py-3 px-5 text-md font-satoshi text-black rounded-full">
-              <SquarePen />
-              Take a practice test
-            </Button>
-          </CardFooter>
-        </div>
-        <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
-          <DecimalsArrowRight size={380} color="white" />
-        </div>
-      </Card> */}
       <h1 className="font-satoshi-bold text-2xl tracking-tight">
         What are you looking for?
       </h1>
       <section className="relative w-full">
         <input
-          type="text"
-          placeholder="Search..."
-          className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+          onFocus={() => setIsSearchOpen(true)}
+          placeholder="Search practice sheets..."
+          readOnly
+          className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm cursor-pointer"
         />
         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
           <Search size={22} color="gray" />
         </div>
       </section>
+
       <section className="space-y-4">
         <h1 className="font-satoshi-bold text-2xl tracking-tight">
           Pick up where you left off
@@ -402,6 +351,17 @@ export const Home = () => {
           </div>
         </section>
       </section>
+      {isSearchOpen && (
+        <SearchOverlay
+          sheets={practiceSheets}
+          onClose={() => {
+            setIsSearchOpen(false);
+            setSearchQuery("");
+          }}
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+        />
+      )}
     </main>
   );
 };