feat: subject history

src/components/SearchCard.tsx

@@ -61,7 +61,7 @@ const SearchCard: FC<SearchCardProps> = ({
     };
 
     return (
-        <Card className="col-span-3 h-fit shadow-2xl lg:col-span-1">
+        <Card className="col-span-3 shadow-2xl lg:col-span-1">
             <CardHeader>
                 <CardTitle>{title}</CardTitle>
                 <CardDescription>{description}</CardDescription>

src/components/SubjectList.tsx

@@ -9,6 +9,7 @@ import { ChevronsRight } from "lucide-react";
 import { useParams } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { useEffect } from "react";
+import SubjectListHistory from "./SubjectListHistory";
 
 interface SubjectListProps {
     course: Courses;
@@ -63,6 +64,7 @@ const SubjectList = ({ course, list }: SubjectListProps) => {
                                     <ChevronsRight className="h-4 w-4" />
                                 </Button>
                             </div>
+                            <SubjectListHistory />
                         </div>
                     </CardContent>
                 </Card>

src/components/SubjectListHistory.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useLocalStorage } from "@mantine/hooks";
+import Link from "next/link";
+import { buttonVariants } from "./ui/button";
+import _ from "lodash";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area";
+
+const SubjectListHistory = () => {
+    const [subjectHistory, setSubjectHistory] = useLocalStorage<string[]>({
+        key: "subject-history",
+        defaultValue: [],
+    });
+
+    const handleHistory = (path: string) => {
+        setSubjectHistory((prev) => {
+            let history: string[] = [];
+            if (prev.includes(path)) {
+                prev.splice(prev.indexOf(path), 1);
+            }
+            history = [path, ...prev];
+            if (history.length > 7) {
+                history.pop();
+            }
+            return history;
+        });
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <p className="text-sm font-semibold text-muted-foreground">
+                Subject history
+            </p>
+            <div className="flex">
+                <ScrollArea className="w-96 flex-1">
+                    <div className="flex items-center gap-4 p-1">
+                        {subjectHistory.length === 0 && (
+                            <p className="inline-flex h-9 flex-1 items-center justify-center rounded border border-input px-3 text-center text-sm">
+                                Browse subjects to accumulate history
+                            </p>
+                        )}
+                        {subjectHistory.map((subject) => (
+                            <Link
+                                href={subject}
+                                key={subject}
+                                className={cn(
+                                    buttonVariants({
+                                        variant: "outline",
+                                        size: "sm",
+                                        className:
+                                            "min-w-[12rem] max-w-[16rem] whitespace-normal text-center",
+                                    })
+                                )}
+                                onClick={() => handleHistory(subject)}
+                            >
+                                <span className="line-clamp-1 flex-1 text-ellipsis">
+                                    {_.startCase(subject.split("/").pop())
+                                        .split("-")
+                                        .join(" ")}
+                                </span>
+                            </Link>
+                        ))}
+                    </div>
+                    <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+            </div>
+        </div>
+    );
+};
+
+export default SubjectListHistory;

src/components/modals/subject-list-modal.tsx

@@ -2,7 +2,7 @@ import {
     useActiveSubjectsStore,
     useSubjectList,
 } from "@/hooks/use-subject-list";
-import { useMediaQuery } from "@mantine/hooks";
+import { useLocalStorage, useMediaQuery } from "@mantine/hooks";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";
 import {
     Sheet,
@@ -57,6 +57,11 @@ SubjectListModal.List = function SubjectListModalList() {
     const subjectList = useSubjectList();
     const { activeSubjects, toggleSubject } = useActiveSubjectsStore();
 
+    const [subjectHistory, setSubjectHistory] = useLocalStorage<string[]>({
+        key: "subject-history",
+        defaultValue: [],
+    });
+
     const router = useRouter();
     const pathname = usePathname();
     const params = useParams<{ slug: string[] }>();
@@ -105,16 +110,26 @@ SubjectListModal.List = function SubjectListModalList() {
     ]);
 
     const handleHref = (subject: string) => {
+        let path: string = "";
         if (pathname.includes("btech")) {
-            router.push(
-                `/courses/btech/${params.slug[0]}/${params.slug[1]}/${subject}`
-            );
-            subjectList.onClose();
+            path = `/courses/btech/${params.slug[0]}/${params.slug[1]}/${subject}`;
         }
         if (pathname.includes("bca")) {
-            router.push(`/courses/bca/${params.slug[0]}/${subject}`);
-            subjectList.onClose();
+            path = `/courses/bca/${params.slug[0]}/${subject}`;
         }
+        setSubjectHistory((prev) => {
+            let history: string[] = [];
+            if (prev.includes(path)) {
+                prev.splice(prev.indexOf(path), 1);
+            }
+            history = [path, ...prev];
+            if (history.length > 7) {
+                history.pop();
+            }
+            return history;
+        });
+        router.push(path);
+        subjectList.onClose();
     };
 
     const handleSubjectClick = (subject: string) => {