main: second iter

Signed-off-by: nfel <nfilsaraee@gmail.com>
2025-12-27 22:41:36 +03:30
parent 8a7842e263
commit 9a7e627329
33 changed files with 4865 additions and 81 deletions
@@ -0,0 +1,95 @@
+'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>
+  );
+}