From 6e9c62346ddaa6cba67ce1f925662d28b363946d Mon Sep 17 00:00:00 2001
From: Abhishek <bumblebee31304@gmail.com>
Date: Sat, 22 Jun 2024 12:44:39 +0530
Subject: [PATCH 1/4] refactor: add re-usable components

---
 frontend/src/components/HomeComponents/FAQ/FAQ.tsx    |  8 ++------
 .../HomeComponents/Footer/__tests__/Footer.test.tsx   |  1 -
 .../components/HomeComponents/Navbar/navbar-utils.ts  |  2 +-
 .../HomeComponents/SetupGuide/SetupGuide.tsx          |  2 +-
 .../SetupGuide/__tests__/SetupGuide.test.tsx          |  2 +-
 .../src/components/HomeComponents/Tasks/Tasks.tsx     |  2 +-
 .../Tasks/__tests__/Pagination.test.tsx               |  2 +-
 .../components/HomeComponents/Tasks/tasks-utils.ts    |  2 +-
 frontend/src/components/HomePage.tsx                  |  2 +-
 frontend/src/components/LandingComponents/FAQ/FAQ.tsx |  8 ++------
 .../src/components/LandingComponents/Hero/Hero.tsx    |  2 +-
 .../LandingComponents/Hero/__tests__/Hero.test.tsx    |  2 +-
 frontend/src/components/ui/accordion.tsx              |  2 +-
 frontend/src/components/ui/avatar.tsx                 |  2 +-
 frontend/src/components/ui/badge.tsx                  |  2 +-
 frontend/src/components/ui/button.tsx                 |  2 +-
 frontend/src/components/ui/card.tsx                   |  2 +-
 frontend/src/components/ui/dialog.tsx                 |  2 +-
 frontend/src/components/ui/dropdown-menu.tsx          |  2 +-
 frontend/src/components/ui/input.tsx                  |  2 +-
 frontend/src/components/ui/label.tsx                  |  2 +-
 frontend/src/components/ui/navigation-menu.tsx        |  2 +-
 frontend/src/components/ui/select.tsx                 |  2 +-
 frontend/src/components/ui/sheet.tsx                  |  2 +-
 frontend/src/components/ui/table.tsx                  |  2 +-
 frontend/src/{lib => components/utils}/URLs.ts        |  0
 frontend/src/{lib => components/utils}/utils.ts       |  0
 frontend/src/components/utils/utils.tsx               | 11 +++++++++++
 28 files changed, 37 insertions(+), 35 deletions(-)
 rename frontend/src/{lib => components/utils}/URLs.ts (100%)
 rename frontend/src/{lib => components/utils}/utils.ts (100%)
 create mode 100644 frontend/src/components/utils/utils.tsx

diff --git a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
index e63d72a5..851dde73 100644
--- a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
@@ -1,16 +1,12 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
+import { BlueHeading } from "@/components/utils/utils";
 
 export const FAQ = () => {
   return (
     <section id="faq" className="container py-24 sm:py-32">
-      <h2 className="text-3xl md:text-4xl font-bold mb-4">
-        Frequently Asked{" "}
-        <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
-          Questions
-        </span>
-      </h2>
+      <BlueHeading prefix={"Frequently Asked"} suffix={"Questions"}></BlueHeading>
 
       <Accordion type="single" collapsible className="w-full AccordionRoot">
         {FAQList.map(({ question, answer, value }) => (
diff --git a/frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx b/frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx
index dcf5fa9c..9ee19880 100644
--- a/frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx
+++ b/frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx
@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Footer } from '../Footer';
 
-// mock the imports
 jest.mock('../../../../assets/logo.png', () => 'logo-path');
 jest.mock('../../../../assets/logo_light.png', () => 'logo-light-path');
 
diff --git a/frontend/src/components/HomeComponents/Navbar/navbar-utils.ts b/frontend/src/components/HomeComponents/Navbar/navbar-utils.ts
index 161b3080..2ea61825 100644
--- a/frontend/src/components/HomeComponents/Navbar/navbar-utils.ts
+++ b/frontend/src/components/HomeComponents/Navbar/navbar-utils.ts
@@ -1,7 +1,7 @@
 import { toast } from "react-toastify";
 import { tasksCollection } from "@/lib/controller";
 import { deleteDoc, doc, getDocs, setDoc, updateDoc } from "firebase/firestore";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 
 export interface RouteProps {
     href: string;
diff --git a/frontend/src/components/HomeComponents/SetupGuide/SetupGuide.tsx b/frontend/src/components/HomeComponents/SetupGuide/SetupGuide.tsx
index d5caf2b1..4daeba95 100644
--- a/frontend/src/components/HomeComponents/SetupGuide/SetupGuide.tsx
+++ b/frontend/src/components/HomeComponents/SetupGuide/SetupGuide.tsx
@@ -1,4 +1,4 @@
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Props } from "../../utils/types";
 import { CopyableCode } from "./CopyableCode";
 
diff --git a/frontend/src/components/HomeComponents/SetupGuide/__tests__/SetupGuide.test.tsx b/frontend/src/components/HomeComponents/SetupGuide/__tests__/SetupGuide.test.tsx
index 5579719e..dc9abe13 100644
--- a/frontend/src/components/HomeComponents/SetupGuide/__tests__/SetupGuide.test.tsx
+++ b/frontend/src/components/HomeComponents/SetupGuide/__tests__/SetupGuide.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { SetupGuide } from '../SetupGuide';
 import { Props } from '../../../utils/types';
-import { url } from '@/lib/URLs';
+import { url } from '@/components/utils/URLs';
 
 // Mocking the CopyableCode component
 jest.mock('../CopyableCode', () => ({
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 277ffb7b..e82eb638 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -20,7 +20,7 @@ import { Label } from "@/components/ui/label"
 import CopyToClipboard from "react-copy-to-clipboard";
 import { formattedDate, getDisplayedPages, handleCopy, handleDate, markTaskAsCompleted, markTaskAsDeleted, Props, sortTasks, sortTasksById } from "./tasks-utils";
 import Pagination from "./Pagination";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import BottomBar from "../BottomBar/BottomBar";
 
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx
index c1022490..54f77a8c 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Pagination.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import Pagination from '../Pagination'; // Adjust the import path as necessary
+import Pagination from '../Pagination';
 
 describe('Pagination', () => {
     const mockPaginate = jest.fn();
diff --git a/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts b/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
index 62527516..0bf971ef 100644
--- a/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
+++ b/frontend/src/components/HomeComponents/Tasks/tasks-utils.ts
@@ -1,5 +1,5 @@
 import { Task } from "@/components/utils/types";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { format, parseISO } from "date-fns";
 import { toast } from "react-toastify";
 
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 69a82bec..31dfab16 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -5,7 +5,7 @@ import { Footer } from "./HomeComponents/Footer/Footer";
 import { SetupGuide } from "./HomeComponents/SetupGuide/SetupGuide";
 import { FAQ } from "./HomeComponents/FAQ/FAQ";
 import { Tasks } from "./HomeComponents/Tasks/Tasks";
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { useNavigate } from "react-router";
 
 export const HomePage: React.FC = () => {
diff --git a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
index e63d72a5..2270f63e 100644
--- a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
@@ -1,16 +1,12 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
+import { BlueHeading } from "@/components/utils/utils";
 
 export const FAQ = () => {
   return (
     <section id="faq" className="container py-24 sm:py-32">
-      <h2 className="text-3xl md:text-4xl font-bold mb-4">
-        Frequently Asked{" "}
-        <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
-          Questions
-        </span>
-      </h2>
+      <BlueHeading prefix="Frequently Asked" suffix="Questions" />
 
       <Accordion type="single" collapsible className="w-full AccordionRoot">
         {FAQList.map(({ question, answer, value }) => (
diff --git a/frontend/src/components/LandingComponents/Hero/Hero.tsx b/frontend/src/components/LandingComponents/Hero/Hero.tsx
index 77aa12f9..ce5ac2fb 100644
--- a/frontend/src/components/LandingComponents/Hero/Hero.tsx
+++ b/frontend/src/components/LandingComponents/Hero/Hero.tsx
@@ -1,4 +1,4 @@
-import { url } from "@/lib/URLs";
+import { url } from "@/components/utils/URLs";
 import { Button } from "../../ui/button";
 import { buttonVariants } from "../../ui/button";
 import { HeroCards } from "./HeroCards";
diff --git a/frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx b/frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx
index 07899fbd..de9b150d 100644
--- a/frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx
+++ b/frontend/src/components/LandingComponents/Hero/__tests__/Hero.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Hero } from '../Hero';
-import { url } from '@/lib/URLs';
+import { url } from '@/components/utils/URLs';
 
 // mocking the HeroCards component
 jest.mock('../HeroCards', () => ({
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
index 8bc66bf5..2a6cfba6 100644
--- a/frontend/src/components/ui/accordion.tsx
+++ b/frontend/src/components/ui/accordion.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const Accordion = AccordionPrimitive.Root;
 
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index fda1c3d5..7580db00 100644
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index f000e3ef..e71fadf5 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 0ba42773..1f1dc76d 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index afa13ecf..3419780a 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Card = React.forwardRef<
   HTMLDivElement,
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index c23630eb..038e60f9 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Dialog = DialogPrimitive.Root
 
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 5c1e59d3..156f6cb7 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 677d05fd..cb26c805 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index 683faa79..ce590aed 100644
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/frontend/src/components/ui/navigation-menu.tsx b/frontend/src/components/ui/navigation-menu.tsx
index 2b3d741f..37d4352d 100644
--- a/frontend/src/components/ui/navigation-menu.tsx
+++ b/frontend/src/components/ui/navigation-menu.tsx
@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/utils/utils";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index fe56d4d3..d5d8deb8 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Select = SelectPrimitive.Root
 
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index 34e5dcaf..744be992 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -3,7 +3,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Sheet = SheetPrimitive.Root
 
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index 7f3502f8..5f728fd9 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/components/utils/utils"
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/frontend/src/lib/URLs.ts b/frontend/src/components/utils/URLs.ts
similarity index 100%
rename from frontend/src/lib/URLs.ts
rename to frontend/src/components/utils/URLs.ts
diff --git a/frontend/src/lib/utils.ts b/frontend/src/components/utils/utils.ts
similarity index 100%
rename from frontend/src/lib/utils.ts
rename to frontend/src/components/utils/utils.ts
diff --git a/frontend/src/components/utils/utils.tsx b/frontend/src/components/utils/utils.tsx
new file mode 100644
index 00000000..9dad8816
--- /dev/null
+++ b/frontend/src/components/utils/utils.tsx
@@ -0,0 +1,11 @@
+export const BlueHeading = ({ prefix, suffix }: { prefix: any, suffix: any }) => {
+  return (
+    <h2 className="text-3xl md:text-4xl font-bold mb-4">
+      {prefix}{" "}
+      <span className="inline bg-gradient-to-r from-[#61DAFB] to-[#1fc0f1] text-transparent bg-clip-text">
+        {suffix}
+      </span>
+    </h2>
+  );
+};
+

From 17dd693833681226089b67529bc20fe709225d79 Mon Sep 17 00:00:00 2001
From: Abhishek <bumblebee31304@gmail.com>
Date: Sat, 22 Jun 2024 12:44:58 +0530
Subject: [PATCH 2/4] refactor: fix bottom bar

---
 .../HomeComponents/BottomBar/BottomBar.tsx    | 13 ++----------
 .../__tests__/bottom-bar-utils.test.ts        | 21 ++++++++++++++++++-
 .../BottomBar/bottom-bar-utils.ts             | 12 +++++++++++
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx b/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
index 995ca7db..932e2195 100644
--- a/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
+++ b/frontend/src/components/HomeComponents/BottomBar/BottomBar.tsx
@@ -1,17 +1,8 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { NavigationMenu } from '@/components/ui/navigation-menu';
 import { buttonVariants } from '@/components/ui/button';
-
-interface BottomBarProps {
-  projects: string[];
-  selectedProject: string | null;
-  setSelectedProject: Dispatch<SetStateAction<string>>;
-
-  status: string[];
-  selectedStatus: string | null;
-  setSelectedStatus: Dispatch<SetStateAction<string>>;
-}
+import { BottomBarProps } from './bottom-bar-utils';
 
 const BottomBar: React.FC<BottomBarProps> = ({ projects, selectedProject, setSelectedProject, status, selectedStatus, setSelectedStatus }) => {
   return (
diff --git a/frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts b/frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts
index 21411f17..11187003 100644
--- a/frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts
+++ b/frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts
@@ -1,4 +1,4 @@
-import { RouteProps, routeList } from '../bottom-bar-utils';
+import { BottomBarProps, RouteProps, routeList } from '../bottom-bar-utils';
 
 describe('RouteProps interface', () => {
     it('should have href and label properties', () => {
@@ -8,6 +8,25 @@ describe('RouteProps interface', () => {
     });
 });
 
+describe('BottomBarProps interface', () => {
+    it('should have project and status properties', () => {
+        const example: BottomBarProps = {
+            projects: [""],
+            selectedProject: "",
+            setSelectedProject: jest.fn(),
+            status: [""],
+            selectedStatus: "",
+            setSelectedStatus: jest.fn(),
+        };
+        expect(example).toHaveProperty('projects');
+        expect(example).toHaveProperty('selectedProject');
+        expect(example).toHaveProperty('setSelectedProject');
+        expect(example).toHaveProperty('status');
+        expect(example).toHaveProperty('selectedStatus');
+        expect(example).toHaveProperty('setSelectedStatus');
+    });
+});
+
 describe('routeList array', () => {
     it('should be an array', () => {
         expect(Array.isArray(routeList)).toBe(true);
diff --git a/frontend/src/components/HomeComponents/BottomBar/bottom-bar-utils.ts b/frontend/src/components/HomeComponents/BottomBar/bottom-bar-utils.ts
index 9ce7b896..bb08f249 100644
--- a/frontend/src/components/HomeComponents/BottomBar/bottom-bar-utils.ts
+++ b/frontend/src/components/HomeComponents/BottomBar/bottom-bar-utils.ts
@@ -1,8 +1,20 @@
+import { Dispatch, SetStateAction } from "react";
+
 export interface RouteProps {
     href: string;
     label: string;
 }
 
+export interface BottomBarProps {
+    projects: string[];
+    selectedProject: string | null;
+    setSelectedProject: Dispatch<SetStateAction<string>>;
+  
+    status: string[];
+    selectedStatus: string | null;
+    setSelectedStatus: Dispatch<SetStateAction<string>>;
+  }  
+
 export const routeList: RouteProps[] = [
     { href: "#", label: "Home" },
     { href: "#tasks", label: "Tasks" },

From 2f2555dd9418206e079cc0884ee1378d9d49587b Mon Sep 17 00:00:00 2001
From: Abhishek <bumblebee31304@gmail.com>
Date: Sat, 22 Jun 2024 13:03:20 +0530
Subject: [PATCH 3/4] fix: fixed imports

---
 frontend/src/components/HomeComponents/FAQ/FAQ.tsx    | 2 +-
 frontend/src/components/LandingComponents/FAQ/FAQ.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
index 851dde73..d4380480 100644
--- a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
-import { BlueHeading } from "@/components/utils/utils";
+import { BlueHeading } from "@/components/utils/Utils.tsx";
 
 export const FAQ = () => {
   return (
diff --git a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
index 2270f63e..b662c6e5 100644
--- a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
-import { BlueHeading } from "@/components/utils/utils";
+import { BlueHeading } from "@/components/utils/Utils.tsx";
 
 export const FAQ = () => {
   return (

From 07a1697d8b9494a6170734fab9cac501de74de0b Mon Sep 17 00:00:00 2001
From: Abhishek <bumblebee31304@gmail.com>
Date: Sat, 22 Jun 2024 13:23:29 +0530
Subject: [PATCH 4/4] fix: fix utils imports in FAQ component

---
 frontend/jest.config.cjs                                        | 2 +-
 frontend/src/components/HomeComponents/FAQ/FAQ.tsx              | 2 +-
 .../HomeComponents/Navbar/__tests__/navbar-utils.test.ts        | 2 +-
 frontend/src/components/LandingComponents/FAQ/FAQ.tsx           | 2 +-
 frontend/src/{components/utils => lib}/utils.tsx                | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/src/{components/utils => lib}/utils.tsx (100%)

diff --git a/frontend/jest.config.cjs b/frontend/jest.config.cjs
index fb4d7aaf..a4ba050c 100644
--- a/frontend/jest.config.cjs
+++ b/frontend/jest.config.cjs
@@ -2,7 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@/(.*)$': ['<rootDir>/src/$1', '<rootDir>/lib/$1'],
   },
   transformIgnorePatterns: [
     "/node_modules/(?!react-toastify)"
diff --git a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
index d4380480..c550f743 100644
--- a/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/HomeComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
-import { BlueHeading } from "@/components/utils/Utils.tsx";
+import { BlueHeading } from "@/lib/utils";
 
 export const FAQ = () => {
   return (
diff --git a/frontend/src/components/HomeComponents/Navbar/__tests__/navbar-utils.test.ts b/frontend/src/components/HomeComponents/Navbar/__tests__/navbar-utils.test.ts
index 115a2948..92e9b433 100644
--- a/frontend/src/components/HomeComponents/Navbar/__tests__/navbar-utils.test.ts
+++ b/frontend/src/components/HomeComponents/Navbar/__tests__/navbar-utils.test.ts
@@ -25,7 +25,7 @@ jest.mock("@/lib/controller", () => ({
   tasksCollection: {},
 }));
 
-jest.mock("@/lib/URLs", () => ({
+jest.mock("@/components/utils/URLs.ts", () => ({
   url: {
     backendURL: "http://localhost:3000/",
   },
diff --git a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
index b662c6e5..7c679176 100644
--- a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@/components/ui/accordion";
 import { FAQItem } from "./FAQItem";
 import { FAQList } from "./faq-utils";
-import { BlueHeading } from "@/components/utils/Utils.tsx";
+import { BlueHeading } from "@/lib/utils";
 
 export const FAQ = () => {
   return (
diff --git a/frontend/src/components/utils/utils.tsx b/frontend/src/lib/utils.tsx
similarity index 100%
rename from frontend/src/components/utils/utils.tsx
rename to frontend/src/lib/utils.tsx