Add tags and categories

src/components/lists/ItemList.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { deleteItems } from "@/actions/deleteItem";
+import { PencilIcon } from "lucide-react";
+import Link from "next/link";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
+
+type ItemProps = {
+  id: string
+  name: string
+  slug: string
+  description: string | null
+  sortIndex: number
+}
+
+export default function ItemList({ items, type }: { items: ItemProps[], type: string }) {
+  // const [isMounted, setIsMounted] = useState(false);
+
+  // useEffect(() => {
+  //   setIsMounted(true);
+  // }, []);
+
+  const handleDelete = (id: string) => {
+    deleteItems(id, type);
+  };
+
+  // if (!isMounted) return null;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+        {items.map(item => (
+          <div key={item.id}>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-xl truncate">{item.name}</CardTitle>
+                <CardDescription></CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col justify-start gap-4">
+                {/* {item.type === 'image' && (
+                  <Image
+                    src={`/api/image/thumbnail/${item.fileKey}.webp`}
+                    alt={item.altText || item.name}
+                    width={200}
+                    height={200}
+                    className="w-full h-auto object-cover"
+                  />
+                )} */}
+              </CardContent>
+              <CardFooter className="flex flex-col gap-2">
+                <Link
+                  href={`/${type}/${item.id}`}
+                  className="w-full"
+                >
+                  <Button variant="default" className="w-full flex items-center gap-2">
+                    <PencilIcon className="h-4 w-4" />
+                    Edit
+                  </Button>
+                </Link>
+                <Button
+                  variant="destructive"
+                  className="w-full"
+                  onClick={() => handleDelete(item.id)}
+                >
+                  Delete
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}