added brands

src/components/Brand/brands.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { FC, useState } from "react";
+import { brandType } from "../../types/brandType";
+import Brand from "./brand";
+import AddBrand from "./addBrand";
+import { addBrand, deleteBrand, editBrand } from "../../actions/brandActions";
+interface Props {
+  brands: brandType[];
+}
+const Brands: FC<Props> = ({ brands }) => {
+  // State to manage the list of todo items
+  const [brandItems, setBrandItems] = useState<brandType[]>(brands);
+  // Function to create a new todo 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 todo item
+  const changeBrandName = (id: number, name: string) => {
+    setBrandItems((prev) =>
+      prev.map((brand) => (brand.id === id ? { ...brand, name } : brand))
+    );
+    editBrand(id, name);
+  };
+ 
+  // Function to delete a brand item
+  const deleteTodoItem = (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">
+      <div className="text-5xl font-medium">To-do app</div>
+      <div className="w-full flex flex-col mt-8 gap-2">
+        {/* Mapping through todoItems and rendering Todo component for each */}
+        {brandItems.map((brand) => (
+          <Brand
+            key={brand.id}
+            brand={brand}
+            changeBrandName={changeBrandName}
+            deleteBrand={deleteBrand}
+          />
+        ))}
+      </div>
+      {/* Adding Todo component for creating new todos */}
+      <AddBrand createBrand={createBrand} />
+    </main>
+  );
+};
+export default Brands;