@@ -0,0 +1,184 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaEdit, FaTrash, FaPlus } from 'react-icons/fa';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { Album } from '@/lib/types';
|
||||
import AdminLayout from '@/components/AdminLayout';
|
||||
import AddAlbumModal from '@/components/AddAlbumModal';
|
||||
import EditAlbumModal from '@/components/EditAlbumModal';
|
||||
import DeleteConfirmationModal from '@/components/DeleteConfirmationModal';
|
||||
|
||||
export default function AdminAlbumsPage() {
|
||||
const { albums, addAlbum, updateAlbum, deleteAlbum } = useAlbums();
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedAlbum, setSelectedAlbum] = useState<Album | null>(null);
|
||||
|
||||
const handleAddAlbum = async (album: Album) => {
|
||||
try {
|
||||
await addAlbum(album);
|
||||
setShowAddModal(false);
|
||||
} catch (error) {
|
||||
console.error('Error adding album:', error);
|
||||
alert('Failed to add album');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditAlbum = async (albumId: string, album: Album) => {
|
||||
try {
|
||||
await updateAlbum(albumId, album);
|
||||
setShowEditModal(false);
|
||||
setSelectedAlbum(null);
|
||||
} catch (error) {
|
||||
console.error('Error updating album:', error);
|
||||
alert('Failed to update album');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAlbum = async () => {
|
||||
if (selectedAlbum) {
|
||||
try {
|
||||
await deleteAlbum(selectedAlbum.id);
|
||||
setShowDeleteModal(false);
|
||||
setSelectedAlbum(null);
|
||||
} catch (error) {
|
||||
console.error('Error deleting album:', error);
|
||||
alert('Failed to delete album');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openEditModal = (album: Album) => {
|
||||
setSelectedAlbum(album);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const openDeleteModal = (album: Album) => {
|
||||
setSelectedAlbum(album);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<div className="p-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Album Management</h1>
|
||||
<p className="text-gray-400">Manage your music catalog • {albums.length} albums</p>
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="px-6 py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan flex items-center gap-2"
|
||||
>
|
||||
<FaPlus />
|
||||
Add New Album
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Albums Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{albums.map((album, index) => (
|
||||
<motion.div
|
||||
key={album.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="glass-effect rounded-xl p-6 border border-white/10"
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
{/* Album Cover */}
|
||||
<div className="w-24 h-24 rounded-lg bg-gradient-to-br from-accent-cyan/20 to-accent-orange/20 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-xs text-white/50 font-bold text-center px-2">
|
||||
{album.title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Album Info */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-1">{album.title}</h3>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
{album.year} • {album.genre}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-3 line-clamp-2">
|
||||
{album.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span>{album.songs.length} tracks</span>
|
||||
<span className="text-accent-orange font-bold">${album.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => openEditModal(album)}
|
||||
className="p-2 bg-accent-cyan/20 hover:bg-accent-cyan/30 rounded-lg text-accent-cyan transition-colors"
|
||||
aria-label="Edit album"
|
||||
>
|
||||
<FaEdit />
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => openDeleteModal(album)}
|
||||
className="p-2 bg-red-500/20 hover:bg-red-500/30 rounded-lg text-red-400 transition-colors"
|
||||
aria-label="Delete album"
|
||||
>
|
||||
<FaTrash />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Track List */}
|
||||
<div className="mt-4 pt-4 border-t border-white/10">
|
||||
<p className="text-sm font-semibold text-gray-400 mb-2">Tracks:</p>
|
||||
<div className="space-y-1">
|
||||
{album.songs.slice(0, 3).map((song, idx) => (
|
||||
<div key={song.id} className="flex justify-between text-sm">
|
||||
<span className="text-gray-300">
|
||||
{idx + 1}. {song.title}
|
||||
</span>
|
||||
<span className="text-gray-500 font-mono">{song.duration}</span>
|
||||
</div>
|
||||
))}
|
||||
{album.songs.length > 3 && (
|
||||
<p className="text-xs text-gray-500">+{album.songs.length - 3} more tracks</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
<AddAlbumModal show={showAddModal} onClose={() => setShowAddModal(false)} onAdd={handleAddAlbum} />
|
||||
<EditAlbumModal
|
||||
show={showEditModal}
|
||||
album={selectedAlbum}
|
||||
onClose={() => {
|
||||
setShowEditModal(false);
|
||||
setSelectedAlbum(null);
|
||||
}}
|
||||
onUpdate={handleEditAlbum}
|
||||
/>
|
||||
<DeleteConfirmationModal
|
||||
show={showDeleteModal}
|
||||
album={selectedAlbum}
|
||||
onClose={() => {
|
||||
setShowDeleteModal(false);
|
||||
setSelectedAlbum(null);
|
||||
}}
|
||||
onConfirm={handleDeleteAlbum}
|
||||
/>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user