49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import AlbumCard from './AlbumCard';
|
|
import { Album } from '@/lib/types';
|
|
import { useAlbums } from '@/lib/AlbumsContext';
|
|
|
|
interface AlbumShowcaseProps {
|
|
purchasedAlbums: string[];
|
|
onPlay: (album: Album) => void;
|
|
onPurchase: (album: Album) => void;
|
|
}
|
|
|
|
export default function AlbumShowcase({ purchasedAlbums, onPlay, onPurchase }: AlbumShowcaseProps) {
|
|
const { albums } = useAlbums();
|
|
return (
|
|
<section className="py-20 px-4 md:px-8" id="albums">
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-paper-dark mb-4 tracking-tight border-b-4 border-paper-dark inline-block pb-2">
|
|
Discography
|
|
</h2>
|
|
<p className="text-xl text-paper-brown max-w-2xl mx-auto mt-6">
|
|
Explore a collection of progressive rock albums that push the boundaries of sound and creativity
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{albums.map((album) => (
|
|
<AlbumCard
|
|
key={album.id}
|
|
album={album}
|
|
isPurchased={purchasedAlbums.includes(album.id)}
|
|
onPlay={onPlay}
|
|
onPurchase={onPurchase}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|