fix : refactored sidebar file into sidebarbutton and sidebarsection for reusability

Author: shikhar-sahay

src/components/SideBar.tsx

@@ -3,12 +3,8 @@
 import React from "react";
 import { Filter } from "lucide-react";
 import { type Filters, type IPaper } from "@/interface";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+import SidebarButton from "./SidebarButton";
+import SidebarSection from "./SidebarSection";
 
 function SideBar({
   selectedExams,
@@ -49,24 +45,6 @@ function SideBar({
   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 })) ?? [];
   const slots =
@@ -140,20 +118,18 @@ function SideBar({
 
   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>
-        <Button onClick={() => handleApplyFilters([], [], [], [], [], false)}>
+        <SidebarButton onClick={() => handleApplyFilters([], [], [], [], [], false)}>
           Reset Filters
-        </Button>
+        </SidebarButton>
       </div>
 
-      {/* Answer Key Toggle */}
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
-        <Button
+        <SidebarButton
           selected={selectedAnswerKeyIncluded}
           onClick={() =>
             handleApplyFilters(
@@ -167,49 +143,23 @@ function SideBar({
           }
         >
           Answer Key Available
-        </Button>
+        </SidebarButton>
       </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">
-        <Button onClick={handleSelectAll}>Select All</Button>
-        <Button onClick={handleDeselectAll}>Deselect All</Button>
-        <Button onClick={handleDownloadAll}>Download Selected</Button>
+        <SidebarButton onClick={handleSelectAll}>Select All</SidebarButton>
+        <SidebarButton onClick={handleDeselectAll}>Deselect All</SidebarButton>
+        <SidebarButton onClick={handleDownloadAll}>Download Selected</SidebarButton>
       </div>
 
-      {/* Filters */}
       {filtersForSidebar.map((section) => (
-        <div
+        <SidebarSection
           key={section.label}
-          className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]"
-        >
-          <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>
-              </AccordionTrigger>
-              <AccordionContent>
-                <div className="my-2 flex w-full flex-wrap items-center">
-                  {section.data.map((item) => (
-                    <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"
-                    >
-                      {item.label}
-                    </Button>
-                  ))}
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </div>
+          label={section.label}
+          data={section.data}
+          selected={section.selected}
+          updater={section.updater}
+        />
       ))}
     </div>
   );

src/components/SidebarButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+
+const SidebarButton: 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>
+);
+
+export default SidebarButton;

src/components/SidebarSection.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import SidebarButton from "./SidebarButton";
+
+interface SidebarSectionProps {
+  label: string;
+  data: { label: string; value: string }[];
+  selected: string[];
+  updater: (newVal: string[]) => void;
+}
+
+const SidebarSection: React.FC<SidebarSectionProps> = ({
+  label,
+  data,
+  selected,
+  updater,
+}) => (
+  <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
+    <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">{label}</div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="my-2 flex w-full flex-wrap items-center">
+            {data.map((item) => (
+              <SidebarButton
+                key={item.value}
+                selected={selected.includes(item.value)}
+                onClick={() => {
+                  const newValues = selected.includes(item.value)
+                    ? selected.filter((v) => v !== item.value)
+                    : [...selected, item.value];
+                  updater(newValues);
+                }}
+                className="mb-2 mr-2"
+              >
+                {item.label}
+              </SidebarButton>
+            ))}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </div>
+);
+
+export default SidebarSection;