81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { ModalContentProps } from '../../types';
|
|
import Trash2Icon from '../icons/Trash2Icon';
|
|
|
|
interface DeleteListModalProps extends ModalContentProps {
|
|
listName: string;
|
|
onDelete: () => Promise<void>;
|
|
}
|
|
|
|
export function DeleteListModal({ onClose, onDelete, listName }: DeleteListModalProps) {
|
|
const handleDelete = async () => {
|
|
try {
|
|
await onDelete();
|
|
onClose();
|
|
} catch (err) {
|
|
console.error('Failed to delete list:', err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-800 rounded-lg shadow-xl w-full max-w-md border border-gray-700">
|
|
<div className="flex justify-between items-center p-6 border-b border-gray-700">
|
|
<h2 id="modal-title" className="text-xl font-bold text-white">
|
|
Delete List
|
|
</h2>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-12 h-12 bg-red-600/20 rounded-full flex items-center justify-center">
|
|
<span className="w-6 h-6">
|
|
<Trash2Icon />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-white mb-2">
|
|
Delete "{listName}"?
|
|
</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
This will permanently delete the list and all cards in it. This action cannot be
|
|
undone.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-6 py-3 text-gray-300 hover:text-white transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-lg transition-colors"
|
|
>
|
|
Delete List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|