96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { FaExclamationTriangle, FaTimes } from 'react-icons/fa';
|
|
import { Album } from '@/lib/types';
|
|
|
|
interface DeleteConfirmationModalProps {
|
|
show: boolean;
|
|
album: Album | null;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export default function DeleteConfirmationModal({
|
|
show,
|
|
album,
|
|
onClose,
|
|
onConfirm,
|
|
}: DeleteConfirmationModalProps) {
|
|
if (!album) return null;
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{show && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.9, opacity: 0 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="glass-effect rounded-2xl max-w-md w-full p-8 border-2 border-red-500/30"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-red-500/20 rounded-full">
|
|
<FaExclamationTriangle className="text-3xl text-red-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white">Delete Album</h2>
|
|
<p className="text-sm text-gray-400">This action cannot be undone</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<FaTimes className="text-xl text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="mb-6">
|
|
<p className="text-gray-300 mb-4">
|
|
Are you sure you want to delete the following album?
|
|
</p>
|
|
<div className="p-4 bg-white/5 rounded-lg">
|
|
<p className="text-white font-semibold">{album.title}</p>
|
|
<p className="text-sm text-gray-400">
|
|
{album.year} • {album.genre} • {album.songs.length} tracks
|
|
</p>
|
|
</div>
|
|
<p className="text-red-400 text-sm mt-4">
|
|
Warning: This will permanently delete this album and all associated data.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 py-3 bg-white/10 hover:bg-white/20 rounded-lg font-semibold text-white transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="flex-1 py-3 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 rounded-lg font-semibold text-white transition-all"
|
|
>
|
|
Delete Album
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|