index.ts files

src/app/page.tsx

@@ -1,10 +1,9 @@
 "use client";
 import { useContext } from "react";
-import Navbar from "../components/Navbar/Navbar";
+import { Navbar } from "@/components/Navbar";
 import { Search, FauxSearch } from "@/components/Search";
-import Filter from "../components/Filter/Filter";
-import Shapes from "../components/Background/Shapes";
-import Line from "../components/Background/Line";
+import { Filter } from "../components/Filter";
+import { Shapes, Line } from "@/components/Background";
 import { SearchContext } from "@/context/SearchContextProvider";
 import Link from "next/link";
 export default function Home() {

src/components/Background/index.ts

@@ -0,0 +1,2 @@
+export { default as Line } from "./Line";
+export { default as Shapes } from "./Shapes";

src/components/Filter/Dropdown.jsx

@@ -1,12 +1,12 @@
 import { Listbox, Transition } from "@headlessui/react";
-import ListboxButton from "./ListboxButton";
+import { ListboxButton, Selected } from ".";
 import { Fragment } from "react";
-import Selected from "./Selected";
+
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function Dropdown({ categories, selectedCategory, onChange }) {
+const Dropdown = ({ categories, selectedCategory, onChange }) => {
   return (
     <Listbox value={selectedCategory} onChange={onChange}>
       {({ open }) => (
@@ -48,4 +48,6 @@ export default function Dropdown({ categories, selectedCategory, onChange }) {
       )}
     </Listbox>
   );
-}
+};
+
+export default Dropdown;

src/components/Filter/Filter.jsx

@@ -1,10 +1,10 @@
 "use client";
 import { useState } from "react";
-import Dropdown from "./Dropdown";
+import { Dropdown } from ".";
 import { IconList, Modal } from "@/components/Icon";
 import { icons, categories } from "@/constants";
 
-export default function Filter() {
+const Filter = () => {
   const [selectedCategory, setSelectedCategory] = useState(categories[0]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedIcon, setSelectedIcon] = useState({});
@@ -51,4 +51,6 @@ export default function Filter() {
       {isModalOpen && <Modal icon={selectedIcon} onClose={closeModal} />}
     </div>
   );
-}
+};
+
+export default Filter;

src/components/Filter/index.ts

@@ -0,0 +1,4 @@
+export { default as Dropdown } from "./Dropdown";
+export { default as Filter } from "./Filter";
+export { default as ListboxButton } from "./ListboxButton";
+export { default as Selected } from "./Selected";

src/components/Navbar/Navbar.jsx

@@ -2,9 +2,10 @@
 import { useState, useContext } from "react";
 import { RxHamburgerMenu, RxCross2 } from "react-icons/rx";
 import { CiSearch } from "react-icons/ci";
-import MenuList from "./MenuList";
+import { MenuList } from ".";
 import { SearchContext } from "@/context/SearchContextProvider";
 import Link from "next/link";
+
 const Navbar = () => {
   // State to manage the visibility of the mobile menu
   const [isMenuOpen, setIsMenuOpen] = useState(false);

src/components/Navbar/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuList } from "./MenuList";
+export { default as Navbar } from "./Navbar";