Refactor components for improved readability and performance

- Removed unused imports in Footer, RelatedPaper, and StoredPapers components.
- Added titles to anchor tags for better accessibility in Navbar.
- Cleaned up spacing and formatting in various components including Searchbar and MultiSelect.
- Updated comments for clarity in SideBar and UpcomingPaper components.
- Enhanced button accessibility by adding titles in Searchbar and SearchbarChild components.
- Improved code consistency by ensuring proper use of semicolons and formatting across multiple files.
- Refactored QR component for better readability.
- Updated FAQ component for improved layout and readability.
- Cleaned up imports and formatting in various UI components including Dialog, Popover, and Select.

Author: upayanmazumder

src/components/Banner.tsx

@@ -5,49 +5,48 @@ import Link from "next/link";
 
 export default function Banner() {
   return (
-    <>
-      <div className="flex h-fit w-full items-center justify-center bg-[#434dba] px-6 py-3 text-center text-white sm:h-14 sm:py-0 md:sticky md:top-0 md:justify-between md:text-left z-50">
-        <div className="flex items-center gap-x-2">
-          <Image
-            src={devsoc as HTMLImageElement}
-            alt="devsoclogo"
-            height={40}
-            width={40}
-            className="md:hidden"
-          />
-          <span className="hidden md:block">
-            Register for DevSOC&apos;25 and enjoy a 3 day full OD to unwind after CATs!
-          </span>
+    <div className="z-50 flex h-fit w-full items-center justify-center bg-[#434dba] px-6 py-3 text-center text-white sm:h-14 sm:py-0 md:sticky md:top-0 md:justify-between md:text-left">
+      <div className="flex items-center gap-x-2">
+        <Image
+          src={devsoc as HTMLImageElement}
+          alt="devsoclogo"
+          height={40}
+          width={40}
+          className="md:hidden"
+        />
+        <span className="hidden md:block">
+          Register for DevSOC&apos;25 and enjoy a 3 day full OD to unwind after
+          CATs!
+        </span>
+        <Link
+          href="https://devsoc.codechefvit.com/"
+          className="block md:hidden"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Register for DevSOC&apos;25
+        </Link>
+      </div>
+      <div className="hidden md:block">
+        <Button className="bg-[#AA7AE7]">
           <Link
+            className="flex items-center gap-x-2"
             href="https://devsoc.codechefvit.com/"
-            className="block md:hidden"
             rel="noopener noreferrer"
             target="_blank"
           >
-            Register for DevSOC&apos;25
+            <span>
+              <Image
+                src={devsoc as HTMLImageElement}
+                alt="devsoclogo"
+                height={20}
+                width={20}
+              />
+            </span>
+            <span className="font-yerk text-xs">Register</span>
           </Link>
-        </div>
-        <div className="hidden md:block">
-          <Button className="bg-[#AA7AE7]">
-            <Link
-              className="flex gap-x-2 items-center"
-              href="https://devsoc.codechefvit.com/"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <span>
-                <Image
-                  src={devsoc as HTMLImageElement}
-                  alt="devsoclogo"
-                  height={20}
-                  width={20}
-                />
-              </span>
-              <span className="font-yerk text-xs">Register</span>
-            </Link>
-          </Button>
-        </div>
+        </Button>
       </div>
-    </>
+    </div>
   );
 }

src/components/Card.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useEffect, useState } from "react";
 import { type IPaper } from "@/interface";
 import Image from "next/image";

src/components/CatalogueContent.tsx

@@ -9,21 +9,11 @@ import Card from "./Card";
 import { extractBracketContent } from "@/util/utils";
 import { useRouter } from "next/navigation";
 import Loader from "./ui/loader";
-import filterIcon from "../assets/filterIcon.svg";
-import filterd from "@/assets/filterd.svg";
-import Image from "next/image";
 import SideBar from "../components/SideBar";
-import toast from "react-hot-toast";
 import Error from "./Error";
 import { Filter } from "lucide-react";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./ui/sheet";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+
 export async function downloadFile(url: string, filename: string) {
   try {
     const response = await axios.get(url, { responseType: "blob" });
@@ -33,7 +23,7 @@ export async function downloadFile(url: string, filename: string) {
     link.download = filename;
     link.click();
     window.URL.revokeObjectURL(link.href);
-  } catch (error) { }
+  } catch (error) {}
 }
 
 const CatalogueContent = () => {
@@ -45,7 +35,8 @@ const CatalogueContent = () => {
   const years = searchParams.get("years")?.split(",");
   const campuses = searchParams.get("campus")?.split(",");
   const semesters = searchParams.get("semester")?.split(",");
-  const answerKeyIncluded = searchParams.get("answerkey")==="true"? true: false;
+  const answerKeyIncluded =
+    searchParams.get("answerkey") === "true" ? true : false;
   // Initialize state with searchParams
   const [selectedExams, setSelectedExams] = useState<string[]>(exams ?? []);
   const [selectedSlots, setSelectedSlots] = useState<string[]>(slots ?? []);
@@ -129,7 +120,7 @@ const CatalogueContent = () => {
     };
 
     void fetchPapers();
-  }, [subject]); // just run on initial page render
+  }, [subject]); // Just run on initial page render
 
   // Memoized handlers
   const handleSelectPaper = useCallback(
@@ -201,7 +192,7 @@ const CatalogueContent = () => {
           answerkeyCondition
         );
       });
-      setFilteredPapers(filtered );
+      setFilteredPapers(filtered);
     },
     [subject, router, papers],
   );
@@ -222,7 +213,6 @@ const CatalogueContent = () => {
     setSelectedPapers([]);
   }, []);
 
-
   return (
     <div className="relative flex min-h-screen justify-center p-0 md:justify-normal">
       <div className="hidden w-[30%] min-w-fit md:block">

src/components/ChildrenWrapper.tsx

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { usePathname } from 'next/navigation';
-import React from 'react';
+import { usePathname } from "next/navigation";
+import React from "react";
 
 function ChildrenWrapper({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
 
-  if (pathname.startsWith('/catalogue')) {
+  if (pathname.startsWith("/catalogue")) {
     return <>{children}</>;
   }
 

src/components/Error.tsx

@@ -2,17 +2,20 @@ import React from "react";
 
 interface ErrorProps {
   message?: string;
-  filtersPulled ?: boolean;
+  filtersPulled?: boolean;
 }
 
-const Error = ({ message = "Some error occured", filtersPulled }: ErrorProps) => {
+const Error = ({
+  message = "Some error occured",
+  filtersPulled,
+}: ErrorProps) => {
   return (
-    <div  className={`flex flex-1 items-center justify-center h-full ${filtersPulled ? "blur-xl" : ""}`}>
-      <div className="-mt-32 text-center text-lg">
-        {message}
-      </div>
+    <div
+      className={`flex h-full flex-1 items-center justify-center ${filtersPulled ? "blur-xl" : ""}`}
+    >
+      <div className="-mt-32 text-center text-lg">{message}</div>
     </div>
   );
 };
 
-export default Error;
+export default Error;

src/components/FilterDialog.tsx

@@ -33,11 +33,21 @@ export const FilterDialog = ({
   onReset: () => void;
   onApplyFilters: (exams: string[], slots: string[], years: string[]) => void;
 }) => {
-  const [selectedExams, setSelectedExams] = useState<string[]>(initialExams ?? []);
-  const [selectedSlots, setSelectedSlots] = useState<string[]>(initialSlots ?? []);
-  const [selectedYears, setSelectedYears] = useState<string[]>(initialYears ?? []);
-  const [selectedCampuses, setSelectedCampuses] = useState<string[]>(initialCampuses ?? []);
-  const [selectedSemesters, setSelectedSemesters] = useState<string[]>(initialSemesters ?? []);
+  const [selectedExams, setSelectedExams] = useState<string[]>(
+    initialExams ?? [],
+  );
+  const [selectedSlots, setSelectedSlots] = useState<string[]>(
+    initialSlots ?? [],
+  );
+  const [selectedYears, setSelectedYears] = useState<string[]>(
+    initialYears ?? [],
+  );
+  const [selectedCampuses, setSelectedCampuses] = useState<string[]>(
+    initialCampuses ?? [],
+  );
+  const [selectedSemesters, setSelectedSemesters] = useState<string[]>(
+    initialSemesters ?? [],
+  );
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -46,16 +56,24 @@ export const FilterDialog = ({
     setSelectedYears(initialYears ?? []);
     setSelectedCampuses(initialCampuses ?? []);
     setSelectedSemesters(initialSemesters ?? []);
-  }, [initialExams, initialSlots, initialYears, initialCampuses, initialSemesters]);
+  }, [
+    initialExams,
+    initialSlots,
+    initialYears,
+    initialCampuses,
+    initialSemesters,
+  ]);
 
   const exams = filterOptions.uniqueExams.map((exam) => ({
     label: exam,
     value: exam,
   }));
-  const slots = filterOptions.uniqueSlots.sort((a, b) => a.localeCompare(b)).map((slot) => ({
-    label: slot,
-    value: slot,
-  }));
+  const slots = filterOptions.uniqueSlots
+    .sort((a, b) => a.localeCompare(b))
+    .map((slot) => ({
+      label: slot,
+      value: slot,
+    }));
   const years = filterOptions.uniqueYears.map((year) => ({
     label: year,
     value: year,

src/components/Footer.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import meta_icon from "../assets/meta_icon.svg";
-import x_twitter_icon from "../assets/x_twitter_icon.svg";
-import meta_icon_dark from "../assets/meta_icon_dark.svg";
-import x_twitter_icon_dark from "../assets/x_twitter_icon_dark.svg";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";

src/components/Navbar.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import ccLogo from "../assets/codechef_logo.svg";
 import Image from "next/image";
 import ModeToggle from "@/components/toggle-theme";
@@ -12,7 +13,11 @@ function Navbar() {
   return (
     <div className="sticky top-0 z-10 flex h-[85px] w-full items-center justify-between gap-x-3 overflow-hidden bg-[#B2B8FF] px-2 py-6 dark:bg-[#130E1F] md:px-12">
       <div className="flex items-center gap-x-2 md:w-auto">
-        <a href="https://www.codechefvit.com/" className="inline-block">
+        <a
+          href="https://www.codechefvit.com/"
+          className="inline-block"
+          title="CodeChef VIT Homepage"
+        >
           <Image
             src={ccLogo as HTMLImageElement}
             alt="codechef-logo"
@@ -35,7 +40,7 @@ function Navbar() {
         <Link href={pathname == "/upload" ? "/" : "/upload"}>
           <div className="rounded-md bg-[#453D60] p-[1.5px] md:p-[2px]">
             <div className="flex items-center gap-1 rounded-md bg-slate-200 px-2 py-1 text-[9px] font-bold tracking-tight text-black transition-all duration-150 hover:bg-white active:scale-95 dark:bg-[#171720] dark:text-white dark:hover:bg-slate-700 sm:gap-2 sm:px-3 sm:py-2 sm:text-[10px] md:px-6 md:text-sm">
-              <ArrowDownLeftIcon className="h-3 w-3 sm:h-4 sm:w-4 rotate-90" />
+              <ArrowDownLeftIcon className="h-3 w-3 rotate-90 sm:h-4 sm:w-4" />
               <span className="text-center font-semibold">
                 {pathname === "/upload" ? "SEARCH PAPERS" : "UPLOAD PAPERS"}
               </span>

src/components/RelatedPaper.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import axios from "axios";

src/components/Searchbar/searchbar-child.tsx

@@ -77,6 +77,7 @@ function SearchBarChild({
           <button
             type="submit"
             className="absolute inset-y-0 right-0 flex items-center pr-3"
+            title="Search"
           >
             <Search className="h-5 w-5 text-black dark:text-white" />
           </button>