feat: 🚀

app/components/DeleteButton.tsx

@@ -0,0 +1,71 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { deletarProduto } from "../actions";
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface DeleteButtonProps {
+    produtoId: number;
+    produtoNome: string;
+    listaId: string;
+}
+
+export function DeleteButton({ produtoId, produtoNome, listaId }: DeleteButtonProps) {
+    const [isDeleting, setIsDeleting] = useState(false);
+    const router = useRouter();
+
+    async function handleDelete() {
+        try {
+            setIsDeleting(true);
+            await deletarProduto(produtoId, listaId);
+            router.refresh();
+        } finally {
+            setIsDeleting(false);
+        }
+    }
+
+    return (
+        <AlertDialog>
+            <AlertDialogTrigger asChild>
+                <Button
+                    variant="destructive"
+                    size="icon"
+                    className="text-white hover:bg-red-600"
+                >
+                    <Trash2 className="h-4 w-4" />
+                </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        Tem certeza que deseja excluir o produto "{produtoNome}"?
+                        Esta ação não pode ser desfeita.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={handleDelete}
+                        className="bg-red-600 hover:bg-red-700"
+                        disabled={isDeleting}
+                    >
+                        {isDeleting ? 'Excluindo...' : 'Excluir'}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}