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/CartSidebar.tsx
+24 -24
View File
@@ -71,7 +71,7 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40"
className="fixed inset-0 bg-paper-dark/80 z-40"
/>
{/* Sidebar */}
@@ -80,22 +80,22 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
animate={{ x: 0 }}
exit={{ x: '100%' }}
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
className="fixed right-0 top-0 bottom-0 w-full md:w-96 glass-effect border-l border-white/10 z-50 flex flex-col"
className="fixed right-0 top-0 bottom-0 w-full md:w-96 bg-paper-sand border-l-4 border-paper-dark z-50 flex flex-col cardboard-texture"
>
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-white/10">
<div className="flex items-center justify-between p-6 border-b-2 border-paper-dark">
<div className="flex items-center gap-3">
<FaShoppingCart className="text-2xl text-accent-cyan" />
<h2 className="text-2xl font-bold text-white">
<FaShoppingCart className="text-2xl text-paper-dark" />
<h2 className="text-2xl font-bold text-paper-dark">
Cart ({cartItems.length})
</h2>
</div>
<button
onClick={onClose}
className="p-2 hover:bg-white/10 rounded-full transition-colors"
className="p-2 hover:bg-paper-brown hover:text-paper-light border-2 border-transparent hover:border-paper-dark transition-colors"
aria-label="Close cart"
>
<FaTimes className="text-xl text-gray-400" />
<FaTimes className="text-xl text-paper-dark" />
</button>
</div>
@@ -103,9 +103,9 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
<div className="flex-1 overflow-y-auto p-6">
{cartItems.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center">
<FaShoppingCart className="text-6xl text-gray-600 mb-4" />
<p className="text-gray-400 text-lg">Your cart is empty</p>
<p className="text-gray-500 text-sm mt-2">Add some albums to get started</p>
<FaShoppingCart className="text-6xl text-paper-gray mb-4" />
<p className="text-paper-dark text-lg font-medium">Your cart is empty</p>
<p className="text-paper-brown text-sm mt-2">Add some albums to get started</p>
</div>
) : (
<div className="space-y-4">
@@ -115,25 +115,25 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
className="glass-effect rounded-xl p-4"
className="paper-card-light p-4"
>
<div className="flex gap-4">
{/* Album Cover */}
<div className="w-20 h-20 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">
<div className="w-20 h-20 bg-paper-brown border-2 border-paper-dark flex items-center justify-center flex-shrink-0">
<span className="text-xs text-paper-dark/50 font-bold text-center px-2">
{item.album.title}
</span>
</div>
{/* Album Info */}
<div className="flex-1 min-w-0">
<h3 className="text-white font-semibold truncate">
<h3 className="text-paper-dark font-semibold truncate">
{item.album.title}
</h3>
<p className="text-sm text-gray-400">
<p className="text-sm text-paper-brown">
{item.album.year} • {item.album.songs.length} tracks
</p>
<p className="text-accent-orange font-bold mt-2">
<p className="text-paper-dark font-bold mt-2">
${item.album.price}
</p>
</div>
@@ -141,10 +141,10 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
{/* Remove Button */}
<button
onClick={() => removeFromCart(item.album.id)}
className="p-2 hover:bg-red-500/20 rounded-lg transition-colors self-start"
className="p-2 hover:bg-paper-brown hover:text-paper-light border-2 border-transparent hover:border-paper-dark transition-colors self-start"
aria-label="Remove from cart"
>
<FaTrash className="text-red-400" />
<FaTrash className="text-paper-dark" />
</button>
</div>
</motion.div>
@@ -155,11 +155,11 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
{/* Footer */}
{cartItems.length > 0 && (
<div className="border-t border-white/10 p-6 space-y-4">
<div className="border-t-2 border-paper-dark p-6 space-y-4">
{/* Total */}
<div className="flex items-center justify-between text-xl">
<span className="text-gray-300 font-semibold">Total</span>
<span className="text-accent-orange font-bold">
<div className="flex items-center justify-between text-xl p-4 paper-card-dark">
<span className="text-paper-light font-semibold">Total</span>
<span className="text-paper-sand font-bold">
${getCartTotal().toFixed(2)}
</span>
</div>
@@ -168,13 +168,13 @@ export default function CartSidebar({ isOpen, onClose }: CartSidebarProps) {
<div className="space-y-3">
<button
onClick={handleCheckout}
className="w-full py-4 bg-gradient-to-r from-accent-orange to-accent-orange/80 hover:from-accent-orange/90 hover:to-accent-orange/70 rounded-lg font-semibold text-white transition-all glow-orange"
className="w-full py-4 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
>
Proceed to Checkout
</button>
<button
onClick={clearCart}
className="w-full py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg font-semibold text-gray-300 transition-all"
className="w-full py-3 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown font-semibold text-paper-dark transition-all shadow-paper"
>
Clear Cart
</button>