more, more, more

src/components/Brand/BrandsList.tsx

@@ -7,15 +7,18 @@ import { addBrand, deleteBrand, editBrand } from "../../actions/brandActions";
 interface Props {
   brands: brandType[];
 }
-const Brands: FC<Props> = ({ brands }) => {
+
+const BrandsList: FC<Props> = ({ brands }) => {
   // State to manage the list of brand items
   const [brandItems, setBrandItems] = useState<brandType[]>(brands);
+  
   // Function to create a new brand item
   const createBrand = (name: string) => {
     const id = (brandItems.at(-1)?.id || 0) + 1;
     addBrand(name);
     setBrandItems((prev) => [...prev, { id: id, name: name }]);
   };
+
   // Function to change the text of a brand item
   const changeBrandName = (id: number, name: string) => {
     setBrandItems((prev) =>
@@ -25,10 +28,11 @@ const Brands: FC<Props> = ({ brands }) => {
   };
  
   // Function to delete a brand item
-  const deleteTodoItem = (id: number) => {
+  const deleteBrandItem = (id: number) => {
     setBrandItems((prev) => prev.filter((brand) => brand.id !== id));
     deleteBrand(id);
   };
+
   // Rendering the brand List component
   return (
     <main className="flex mx-auto max-w-xl w-full min-h-screen flex-col items-center p-16">
@@ -49,4 +53,4 @@ const Brands: FC<Props> = ({ brands }) => {
     </main>
   );
 };
-export default Brands;
+export default BrandsList;

src/components/Brand/brand.tsx

@@ -40,7 +40,7 @@ const Brand: FC<Props> = ({
       deleteBrand(brand.id);
     }
   };
-  // Rendering the Todo component
+  // Rendering the Brands component
   return (
     <div className="flex items-center gap-2 p-4 border-gray-200 border-solid border rounded-lg">
       {/* Checkbox for marking the todo as done */}