75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
"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>
|
|
);
|
|
} |