Bump app version to 0.2.1 and add Spell and DeleteButton components

- Introduced comprehensive `Spell` models with tagging and state management capabilities. - Added reusable `DeleteButton` component with confirmation workflow for destructive actions.
2026-01-26 14:24:22 -05:00
parent 512955d10a
commit 2359638cb0
3 changed files with 176 additions and 1 deletions
--- a/components/form/DeleteButton.tsx
+++ b/components/form/DeleteButton.tsx
@@ -0,0 +1,66 @@
+'use client';
+import {useState} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faTrash} from '@fortawesome/free-solid-svg-icons';
+import AlertBox from '@/components/AlertBox';
+
+interface DeleteButtonProps {
+    onDelete: () => void | Promise<void>;
+    confirmTitle: string;
+    confirmMessage: string;
+    confirmButtonText: string;
+    cancelButtonText: string;
+    disabled?: boolean;
+    className?: string;
+}
+
+export default function DeleteButton(
+    {
+        onDelete,
+        confirmTitle,
+        confirmMessage,
+        confirmButtonText,
+        cancelButtonText,
+        disabled = false,
+        className = ''
+    }: DeleteButtonProps
+) {
+    const [showConfirm, setShowConfirm] = useState<boolean>(false);
+
+    function handlePress(): void {
+        if (disabled) return;
+        setShowConfirm(true);
+    }
+
+    async function handleConfirm(): Promise<void> {
+        setShowConfirm(false);
+        await onDelete();
+    }
+
+    function handleCancel(): void {
+        setShowConfirm(false);
+    }
+
+    return (
+        <>
+            <button
+                onClick={handlePress}
+                disabled={disabled}
+                className={`flex items-center justify-center bg-error/90 hover:bg-error w-10 h-10 rounded-xl border border-error shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200 ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+            >
+                <FontAwesomeIcon icon={faTrash} className="text-text-primary w-5 h-5"/>
+            </button>
+            {showConfirm && (
+                <AlertBox
+                    title={confirmTitle}
+                    message={confirmMessage}
+                    type="danger"
+                    confirmText={confirmButtonText}
+                    cancelText={cancelButtonText}
+                    onConfirm={handleConfirm}
+                    onCancel={handleCancel}
+                />
+            )}
+        </>
+    );
+}