nfel/podzahr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main: vibe coded app to feel like paper

Browse Source 
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
nfel
2025-12-30 00:00:16 +03:30
parent acbaebb947
commit 91c149e92e
27 changed files with 901 additions and 8696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AlbumCard.tsx
+22 -22
View File
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
import { FaPlay, FaShoppingCart, FaInfoCircle } from 'react-icons/fa';
import { Album } from '@/lib/types';
import { useCart } from '@/lib/CartContext';
import { formatPrice } from '@/lib/utils';
interface AlbumCardProps {
album: Album;
@@ -41,35 +42,34 @@ export default function AlbumCard({ album, isPurchased, onPlay, onPurchase }: Al
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
whileHover={{ y: -10 }}
whileHover={{ y: -4, transition: { duration: 0.2 } }}
onClick={handleCardClick}
className="glass-effect rounded-xl overflow-hidden group cursor-pointer"
className="paper-card-light overflow-hidden group cursor-pointer hover:shadow-paper-lg transition-shadow"
>
{/* Album Cover */}
<div className="relative aspect-square bg-gradient-to-br from-primary-600/50 to-primary-800/50 flex items-center justify-center overflow-hidden">
<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 font-bold text-white/20 p-8 text-center">
<div className="relative aspect-square bg-paper-brown flex items-center justify-center overflow-hidden border-b-2 border-paper-gray">
<div className="relative z-10 text-6xl font-bold text-paper-dark/20 p-8 text-center">
{album.title}
</div>
{/* Overlay on hover */}
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center gap-3">
<div className="absolute inset-0 bg-paper-dark/80 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center gap-3">
<button
onClick={(e) => {
e.stopPropagation();
onPlay(album);
}}
className="p-4 bg-accent-cyan hover:bg-accent-cyan/80 rounded-full transition-all glow-cyan"
className="p-4 bg-paper-sand hover:bg-paper-gray border-2 border-paper-dark transition-all shadow-paper"
aria-label="Play preview"
>
<FaPlay className="text-2xl text-white" />
<FaPlay className="text-2xl text-paper-dark" />
</button>
<button
onClick={(e) => handleViewDetails(e)}
className="p-4 bg-white/20 hover:bg-white/30 rounded-full transition-all"
className="p-4 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown transition-all shadow-paper"
aria-label="View details"
>
<FaInfoCircle className="text-2xl text-white" />
<FaInfoCircle className="text-2xl text-paper-dark" />
</button>
{!isPurchased && (
<button
@@ -77,39 +77,39 @@ export default function AlbumCard({ album, isPurchased, onPlay, onPurchase }: Al
disabled={isInCart(album.id)}
className={`p-4 ${
isInCart(album.id)
? 'bg-gray-700 cursor-not-allowed'
: 'bg-accent-orange hover:bg-accent-orange/80 glow-orange'
} rounded-full transition-all`}
? 'bg-paper-gray border-2 border-paper-brown cursor-not-allowed opacity-50'
: 'bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark shadow-paper'
} transition-all`}
aria-label="Add to cart"
>
<FaShoppingCart className="text-2xl text-white" />
<FaShoppingCart className="text-2xl text-paper-light" />
</button>
)}
</div>
{/* Purchased Badge */}
{isPurchased && (
<div className="absolute top-4 right-4 bg-accent-cyan text-white px-3 py-1 rounded-full text-sm font-semibold">
<div className="absolute top-4 right-4 bg-paper-dark text-paper-light px-3 py-1 border-2 border-paper-brown text-sm font-semibold">
Owned
</div>
)}
</div>
{/* Album Info */}
<div className="p-6 space-y-3">
<div className="p-6 space-y-3 bg-paper-light cardboard-texture">
<div>
<h3 className="text-xl font-bold text-white group-hover:text-accent-cyan transition-colors">
<h3 className="text-xl font-bold text-paper-dark group-hover:border-b-2 group-hover:border-paper-dark transition-all inline-block">
{album.title}
</h3>
<p className="text-sm text-gray-400">{album.year} • {album.genre}</p>
<p className="text-sm text-paper-gray font-medium mt-1">{album.year} • {album.genre}</p>
</div>
<p className="text-gray-300 text-sm line-clamp-2">{album.description}</p>
<p className="text-paper-dark text-sm line-clamp-2">{album.description}</p>
<div className="flex items-center justify-between pt-2">
<span className="text-sm text-gray-400">{album.songs.length} tracks</span>
<div className="flex items-center justify-between pt-2 border-t-2 border-paper-gray">
<span className="text-sm text-paper-brown font-medium">{album.songs.length} tracks</span>
{!isPurchased && (
<span className="text-lg font-bold text-accent-orange">${album.price}</span>
<span className="text-lg font-bold text-paper-dark">{formatPrice(album.price)}</span>
)}
</div>
</div>