fix : fixed buttons light mode hover and refactored file

Author: shikhar-sahay

src/components/SideBar.tsx

@@ -43,27 +43,36 @@ function SideBar({
     years: string[],
     campus: string[],
     semester: string[],
-    anskey: boolean,
+    anskey: boolean
   ) => void;
   handleSelectAll: () => void;
   handleDeselectAll: () => void;
   handleDownloadSelected: () => void;
 }) {
+  const Button: React.FC<{
+    onClick: () => void;
+    selected?: boolean;
+    className?: string;
+    children: React.ReactNode;
+  }> = ({ onClick, selected = false, className, children }) => (
+    <div
+      onClick={onClick}
+      className={`cursor-pointer rounded-full border-2 px-2 py-1 font-play text-xs font-semibold ${
+        selected
+          ? "border-[#B2B8FF] bg-[#B2B8FF] text-black dark:border-[#434dba] dark:bg-[#434dba] dark:text-white"
+          : "border-black hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
+      } ${className ?? ""}`}
+    >
+      {children}
+    </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,
@@ -82,7 +91,7 @@ function SideBar({
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -96,7 +105,7 @@ function SideBar({
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -110,7 +119,7 @@ function SideBar({
           newVal,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded,
+          selectedAnswerKeyIncluded
         ),
     },
     {
@@ -124,72 +133,48 @@ 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>
+        <Button onClick={() => handleApplyFilters([], [], [], [], [], false)}>
+          Reset Filters
+        </Button>
       </div>
 
+      {/* Answer Key Toggle */}
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
-        <div
-          onClick={() => {
+        <Button
+          selected={selectedAnswerKeyIncluded}
+          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]"
-          }`}
+              !selectedAnswerKeyIncluded
+            )
+          }
         >
           Answer Key Available
-        </div>
+        </Button>
       </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>
+        <Button onClick={handleSelectAll}>Select All</Button>
+        <Button onClick={handleDeselectAll}>Deselect All</Button>
+        <Button onClick={handleDownloadAll}>Download Selected</Button>
       </div>
 
       {/* Filters */}
@@ -201,29 +186,24 @@ 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
+                    <Button
                       key={item.value}
+                      selected={section.selected.includes(item.value)}
                       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"
-                      }`}
+                      className="mb-2 mr-2"
                     >
                       {item.label}
-                    </div>
+                    </Button>
                   ))}
                 </div>
               </AccordionContent>
@@ -235,4 +215,4 @@ function SideBar({
   );
 }
 
-export default SideBar;
+export default SideBar;