main: vibe coded app to feel like paper
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
+31
-30
@@ -7,6 +7,7 @@ import { FaPlay, FaShoppingCart, FaArrowLeft, FaClock, FaMusic } from 'react-ico
|
||||
import { Album, Purchase } from '@/lib/types';
|
||||
import { useCart } from '@/lib/CartContext';
|
||||
import { useAlbums } from '@/lib/AlbumsContext';
|
||||
import { formatPrice } from '@/lib/utils';
|
||||
import Header from '@/components/Header';
|
||||
import CartSidebar from '@/components/CartSidebar';
|
||||
import MusicPlayer from '@/components/MusicPlayer';
|
||||
@@ -78,10 +79,10 @@ export default function AlbumDetailPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold text-white mb-4">Album not found</h1>
|
||||
<h1 className="text-3xl font-bold text-paper-dark mb-4">Album not found</h1>
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="px-6 py-3 bg-accent-cyan hover:bg-accent-cyan/80 rounded-lg text-white transition-all"
|
||||
className="px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light transition-all shadow-paper"
|
||||
>
|
||||
Go Back Home
|
||||
</button>
|
||||
@@ -112,7 +113,7 @@ export default function AlbumDetailPage() {
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-8 py-6">
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="flex items-center gap-2 text-gray-400 hover:text-accent-cyan transition-colors"
|
||||
className="flex items-center gap-2 text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
||||
>
|
||||
<FaArrowLeft />
|
||||
Back to Albums
|
||||
@@ -129,15 +130,15 @@ export default function AlbumDetailPage() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-primary-600/50 to-primary-800/50 flex items-center justify-center border-2 border-accent-cyan/50 glow-cyan">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/20 to-accent-orange/20"></div>
|
||||
<div className="relative z-10 text-6xl md:text-8xl font-bold text-white/20 p-8 text-center">
|
||||
<div className="aspect-square overflow-hidden bg-paper-brown flex items-center justify-center border-4 border-paper-dark shadow-paper-lg">
|
||||
<div className="absolute inset-0 cardboard-texture"></div>
|
||||
<div className="relative z-10 text-6xl md:text-8xl font-bold text-paper-dark/20 p-8 text-center">
|
||||
{album.title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isPurchased && (
|
||||
<div className="absolute top-6 right-6 bg-accent-cyan text-white px-4 py-2 rounded-full text-sm font-semibold">
|
||||
<div className="absolute top-6 right-6 bg-paper-dark text-paper-light px-4 py-2 border-2 border-paper-brown text-sm font-semibold shadow-paper">
|
||||
Owned
|
||||
</div>
|
||||
)}
|
||||
@@ -151,31 +152,31 @@ export default function AlbumDetailPage() {
|
||||
className="space-y-6"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400 mb-2">{album.year} • {album.genre}</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-4">
|
||||
<p className="text-sm text-paper-brown mb-2 font-medium">{album.year} • {album.genre}</p>
|
||||
<h1 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">
|
||||
{album.title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-300 leading-relaxed">
|
||||
<p className="text-xl text-paper-dark leading-relaxed mt-6">
|
||||
{album.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Album Stats */}
|
||||
<div className="flex gap-6 text-gray-400">
|
||||
<div className="flex gap-6 text-paper-dark p-4 paper-card">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaMusic className="text-accent-cyan" />
|
||||
<span>{album.songs.length} tracks</span>
|
||||
<FaMusic className="text-paper-brown" />
|
||||
<span className="font-medium">{album.songs.length} tracks</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FaClock className="text-accent-cyan" />
|
||||
<span>{formatTotalDuration(totalDuration)}</span>
|
||||
<FaClock className="text-paper-brown" />
|
||||
<span className="font-medium">{formatTotalDuration(totalDuration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
{!isPurchased && (
|
||||
<div className="text-3xl font-bold text-accent-orange">
|
||||
${album.price}
|
||||
<div className="text-3xl font-bold text-paper-light p-4 paper-card-dark">
|
||||
{formatPrice(album.price)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -183,7 +184,7 @@ export default function AlbumDetailPage() {
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button
|
||||
onClick={() => setCurrentAlbum(album)}
|
||||
className="flex-1 py-4 bg-accent-cyan hover:bg-accent-cyan/80 rounded-lg font-semibold text-white transition-all glow-cyan flex items-center justify-center gap-2"
|
||||
className="flex-1 py-4 bg-paper-sand hover:bg-paper-gray border-2 border-paper-dark font-semibold text-paper-dark transition-all shadow-paper hover:shadow-paper-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaPlay />
|
||||
{isPurchased ? 'Play Album' : 'Preview'}
|
||||
@@ -193,7 +194,7 @@ export default function AlbumDetailPage() {
|
||||
<>
|
||||
<button
|
||||
onClick={() => setAlbumToPurchase(album)}
|
||||
className="flex-1 py-4 bg-accent-orange hover:bg-accent-orange/80 rounded-lg font-semibold text-white transition-all glow-orange flex items-center justify-center gap-2"
|
||||
className="flex-1 py-4 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
Buy Now
|
||||
</button>
|
||||
@@ -202,9 +203,9 @@ export default function AlbumDetailPage() {
|
||||
disabled={inCart}
|
||||
className={`py-4 px-6 ${
|
||||
inCart
|
||||
? 'bg-gray-700 cursor-not-allowed'
|
||||
: 'bg-white/10 hover:bg-white/20 border border-white/20'
|
||||
} rounded-lg font-semibold text-white transition-all flex items-center justify-center gap-2`}
|
||||
? 'bg-paper-gray cursor-not-allowed opacity-50'
|
||||
: 'bg-paper-light hover:bg-paper-sand border-2 border-paper-brown'
|
||||
} font-semibold text-paper-dark transition-all flex items-center justify-center gap-2 shadow-paper`}
|
||||
>
|
||||
<FaShoppingCart />
|
||||
{inCart ? 'In Cart' : 'Add to Cart'}
|
||||
@@ -222,9 +223,9 @@ export default function AlbumDetailPage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="glass-effect rounded-2xl p-8"
|
||||
className="paper-card p-8 cardboard-texture"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Track List</h2>
|
||||
<h2 className="text-2xl font-bold text-paper-dark mb-6 border-b-2 border-paper-dark pb-2">Track List</h2>
|
||||
<div className="space-y-2">
|
||||
{album.songs.map((song, index) => (
|
||||
<motion.div
|
||||
@@ -232,29 +233,29 @@ export default function AlbumDetailPage() {
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.4, delay: index * 0.05 }}
|
||||
className="flex items-center justify-between p-4 rounded-lg hover:bg-white/5 transition-colors group cursor-pointer"
|
||||
className="flex items-center justify-between p-4 hover:bg-paper-sand border-2 border-transparent hover:border-paper-brown transition-all group cursor-pointer"
|
||||
onClick={() => setCurrentAlbum(album)}
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<span className="text-gray-500 font-mono text-sm w-8">
|
||||
<span className="text-paper-gray font-mono text-sm w-8">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-white font-medium group-hover:text-accent-cyan transition-colors">
|
||||
<h3 className="text-paper-dark font-medium group-hover:font-bold transition-all">
|
||||
{song.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
{!isPurchased && (
|
||||
<span className="text-xs text-accent-orange px-2 py-1 bg-accent-orange/20 rounded">
|
||||
<span className="text-xs text-paper-dark px-2 py-1 bg-paper-brown/20 border border-paper-brown">
|
||||
Preview
|
||||
</span>
|
||||
)}
|
||||
<span className="text-gray-400 text-sm font-mono">
|
||||
<span className="text-paper-brown text-sm font-mono">
|
||||
{song.duration}
|
||||
</span>
|
||||
<FaPlay className="text-accent-cyan opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<FaPlay className="text-paper-dark opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user