feature: add draft

src/components/DeleteButton.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
+import { Button } from "./ui/Button";
+
+interface DeleteButtonProps {
+  onDelete: () => Promise<void>;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const CONFIRM_TIMEOUT = 3000;
+
+export function DeleteButton({ onDelete, className, size = "sm" }: DeleteButtonProps) {
+  const [confirming, setConfirming] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = async () => {
+    if (deleting) return;
+
+    if (!confirming) {
+      setConfirming(true);
+      timeoutRef.current = setTimeout(() => {
+        setConfirming(false);
+      }, CONFIRM_TIMEOUT);
+      return;
+    }
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    setDeleting(true);
+    try {
+      await onDelete();
+    } catch {
+      setDeleting(false);
+      setConfirming(false);
+    }
+  };
+
+  return (
+    <Button
+      size={size}
+      onClick={handleClick}
+      disabled={deleting}
+      className={clsx(
+        "transition-all duration-200",
+        confirming
+          ? "border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
+          : "border-neutral-400 text-neutral-500 hover:border-neutral-600 hover:text-neutral-700",
+        className
+      )}
+    >
+      {deleting ? "Deleting..." : confirming ? "Confirm Delete" : "Delete"}
+    </Button>
+  );
+}