fix : changed hover over buttons for light mode functionality and refactored file

Author: shikhar-sahay

src/components/SideBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import clsx from "clsx";
 import { Filter } from "lucide-react";
 import { type Filters, type IPaper } from "@/interface";
 import {
@@ -11,14 +12,14 @@ import {
 } from "@/components/ui/accordion";
 
 function SideBar({
+  loading,
   selectedExams,
   selectedSlots,
   selectedYears,
   selectedCampuses,
   selectedSemesters,
   selectedAnswerKeyIncluded,
   filterOptions,
-  filtersNotPulled,
   handleApplyFilters,
   handleSelectAll,
   handleDeselectAll,
@@ -31,44 +32,46 @@ function SideBar({
   selectedCampuses: string[];
   selectedSemesters: string[];
   selectedAnswerKeyIncluded: boolean;
-  filtersNotPulled: () => void;
-  noAppliedFilters: () => void;
-  closeFilters: () => void;
-  subject: string | null;
   filterOptions: Filters | undefined;
-  selectedPapers: IPaper[];
   handleApplyFilters: (
     exams: string[],
     slots: string[],
     years: string[],
     campus: string[],
     semester: string[],
-    anskey: boolean,
+    anskey: boolean
   ) => void;
   handleSelectAll: () => void;
   handleDeselectAll: () => void;
   handleDownloadSelected: () => void;
 }) {
+  // Reusable button with consistent hover styles
+  const SidebarButton: React.FC<{
+    label: string;
+    onClick: () => void;
+    selected?: boolean;
+    className?: string;
+  }> = ({ label, onClick, selected = false, className }) => (
+    <div
+      onClick={onClick}
+      className={clsx(
+        "cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white",
+        selected && "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]",
+        className
+      )}
+    >
+      {label}
+    </div>
+  );
+
   const exams =
-    filterOptions?.unique_exams.map((exam) => ({
-      label: exam,
-      value: exam,
-    })) ?? [];
+    filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ?? [];
   const slots =
-    filterOptions?.unique_slots.map((slot) => ({
-      label: slot,
-      value: slot,
-    })) ?? [];
+    filterOptions?.unique_slots.map((slot) => ({ label: slot, value: slot })) ?? [];
   const years =
-    filterOptions?.unique_years.map((year) => ({
-      label: year,
-      value: year,
-    })) ?? [];
+    filterOptions?.unique_years.map((year) => ({ label: year, value: year })) ?? [];
   const semesters =
-    filterOptions?.unique_semesters.map((semester) => ({
-      label: semester,
-      value: semester,
-    })) ?? [];
+    filterOptions?.unique_semesters.map((semester) => ({ label: semester, value: semester })) ?? [];
 
   const filtersForSidebar = [
     {
@@ -82,7 +85,7 @@ function SideBar({
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -96,7 +99,7 @@ function SideBar({
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -110,7 +113,7 @@ function SideBar({
           newVal,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -124,75 +127,51 @@ function SideBar({
           selectedYears,
           selectedCampuses,
           newVal,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
   ];
 
   return (
     <div className="no-scrollbar fixed sticky top-0 h-[100vh] flex-col items-baseline overflow-y-auto border-r-2 border-[#36266d] bg-[#f3f5ff] pt-[10px] dark:bg-[#070114] md:flex">
+      {/* Header */}
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
         <div className="flex items-center gap-1">
           <Filter size={24} />
           <div className="font-play text-xl font-bold">Filters</div>
         </div>
-        <div className="flex flex-col">
-          <div
-            className="cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
-            onClick={() => {
-              handleApplyFilters([], [], [], [], [], false);
-            }}
-          >
-            Reset Filters
-          </div>
-        </div>
+        <SidebarButton
+          label="Reset Filters"
+          onClick={() => handleApplyFilters([], [], [], [], [], false)}
+        />
       </div>
 
+      {/* Answer Key Toggle */}
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
-        <div
-          onClick={() => {
+        <SidebarButton
+          label="Answer Key Available"
+          onClick={() =>
             handleApplyFilters(
               selectedExams,
               selectedSlots,
               selectedYears,
               selectedCampuses,
               selectedSemesters,
-              !selectedAnswerKeyIncluded,
-            );
-          }}
-          className={`flex cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-slate-800 hover:text-white ${
-            selectedAnswerKeyIncluded
-              ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]"
-              : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"
-          }`}
-        >
-          Answer Key Available
-        </div>
+              !selectedAnswerKeyIncluded
+            )
+          }
+          selected={selectedAnswerKeyIncluded}
+        />
       </div>
 
       {/* Select/Deselect/Download All Buttons */}
       <div className="flex w-full flex-wrap justify-between gap-2 border-b-2 border-[#36266d] px-[10px] py-4">
-        <div
-          onClick={handleSelectAll}
-          className="cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
-        >
-          Select All
-        </div>
-        <div
-          onClick={handleDeselectAll}
-          className="cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
-        >
-          Deselect All
-        </div>
-        <div
-          onClick={handleDownloadAll}
-          className="cursor-pointer rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
-        >
-          Download Selected
-        </div>
+        <SidebarButton label="Select All" onClick={handleSelectAll} />
+        <SidebarButton label="Deselect All" onClick={handleDeselectAll} />
+        <SidebarButton label="Download Selected" onClick={handleDownloadAll} />
       </div>
 
-      {/* Filters */}
+      {/* Filters Accordion */}
       {filtersForSidebar.map((section) => (
         <div
           key={section.label}
@@ -201,29 +180,23 @@ function SideBar({
           <Accordion className="w-full" type="single" collapsible>
             <AccordionItem className="border-none no-underline" value="item-1">
               <AccordionTrigger className="w-full no-underline">
-                <div className="font-play text-sm no-underline">
-                  {section.label}
-                </div>
+                <div className="font-play text-sm no-underline">{section.label}</div>
               </AccordionTrigger>
               <AccordionContent>
                 <div className="my-2 flex w-full flex-wrap items-center">
                   {section.data.map((item) => (
-                    <div
+                    <SidebarButton
                       key={item.value}
+                      label={item.label}
                       onClick={() => {
                         const newValues = section.selected.includes(item.value)
                           ? section.selected.filter((v) => v !== item.value)
                           : [...section.selected, item.value];
                         section.updater(newValues);
                       }}
-                      className={`mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 font-play text-xs font-semibold hover:bg-slate-800 hover:text-white ${
-                        section.selected.includes(item.value)
-                          ? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]"
-                          : "bg-none dark:border-white"
-                      }`}
-                    >
-                      {item.label}
-                    </div>
+                      selected={section.selected.includes(item.value)}
+                      className="mb-2 mr-2"
+                    />
                   ))}
                 </div>
               </AccordionContent>