Full website
This commit is contained in:
Your Name committed
1 parent
807c43ece5
commit
ea9f33f60e
40 files changed
+4503
-1202
No files matched your search
@@ -13,83 +13,62 @@ export default function CartDrawer() {
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-night-950/80 backdrop-blur-sm animate-fade-in"
|
||||
<div
|
||||
className="absolute inset-0 bg-pop-black/45 backdrop-blur-sm"
|
||||
onClick={() => toggleCart(false)}
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<div className="relative w-full max-w-md h-full bg-night-900 shadow-2xl flex flex-col border-l border-white/10 animate-slide-left">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-night-950/50">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<ShoppingBag className="w-5 h-5 text-cyan-glow" />
|
||||
|
||||
<div className="relative flex h-full w-full max-w-md flex-col border-l border-gray-200 bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-gray-100 bg-pop-bg/70 p-6">
|
||||
<h2 className="flex items-center gap-2 text-xl font-bold text-pop-black">
|
||||
<ShoppingBag className="h-5 w-5 text-pop-pink" />
|
||||
{t('cart.title')}
|
||||
<span className="text-sm font-normal text-slate-400 bg-white/5 px-2 py-0.5 rounded-full ml-2">
|
||||
<span className="ml-2 rounded-full bg-white px-2 py-0.5 text-sm font-normal text-gray-500">
|
||||
{t('cart.items', { count: items.length })}
|
||||
</span>
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => toggleCart(false)}
|
||||
className="p-2 hover:bg-white/5 rounded-full transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-slate-400 hover:text-white" />
|
||||
<button onClick={() => toggleCart(false)} className="rounded-full border border-gray-200 p-2 text-gray-500 transition-colors hover:text-pop-pink">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Cart Items */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
<div className="flex-1 space-y-6 overflow-y-auto p-6">
|
||||
{items.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-500 space-y-4">
|
||||
<ShoppingBag className="w-16 h-16 opacity-20" />
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4 text-gray-500">
|
||||
<ShoppingBag className="h-16 w-16 opacity-30" />
|
||||
<p>{t('cart.empty')}</p>
|
||||
<button
|
||||
onClick={() => toggleCart(false)}
|
||||
className="text-cyan-glow hover:underline tracking-widest uppercase text-xs font-bold"
|
||||
>
|
||||
<button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-pop-pink hover:underline">
|
||||
{t('cart.continueShopping')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
items.map((item) => (
|
||||
<div key={item.cartItemId} className="flex gap-4 p-4 rounded-2xl bg-white/5 border border-white/5 group relative">
|
||||
<div className="w-20 h-24 rounded-lg bg-night-950 overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
<div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-gray-100 bg-pop-bg/60 p-4">
|
||||
<div className="h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-white">
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
alt={item.productName}
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col pt-1 space-y-1 relative">
|
||||
<h3 className="font-bold text-sm leading-tight pr-6">{item.productName}</h3>
|
||||
{item.variantSize && (
|
||||
<p className="text-xs text-slate-400">{item.variantSize}</p>
|
||||
)}
|
||||
<p className="text-cyan-glow text-sm font-bold mt-auto">{formatPrice(item.price)}</p>
|
||||
|
||||
<div className="flex items-center gap-3 mt-2 bg-night-950/50 rounded-lg w-max border border-white/5">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)}
|
||||
className="p-1 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
|
||||
<div className="relative flex flex-1 flex-col space-y-1 pt-1">
|
||||
<h3 className="pr-6 text-sm font-bold leading-tight text-pop-black">{item.productName}</h3>
|
||||
{item.variantSize && <p className="text-xs text-gray-500">{item.variantSize}</p>}
|
||||
<p className="mt-auto text-sm font-bold text-pop-pink">{formatPrice(item.price)}</p>
|
||||
|
||||
<div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-gray-200 bg-white">
|
||||
<button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-pop-pink">
|
||||
<Minus className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="w-4 text-center text-xs font-bold">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)}
|
||||
className="p-1 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-pop-pink">
|
||||
<Plus className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => removeFromCart(item.cartItemId)}
|
||||
className="absolute top-1 right-0 p-1 text-slate-500 hover:text-rose-500 transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-gray-400 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,19 +76,14 @@ export default function CartDrawer() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{items.length > 0 && (
|
||||
<div className="p-6 border-t border-white/10 bg-night-950/50 space-y-6">
|
||||
<div className="space-y-6 border-t border-gray-100 bg-pop-bg/70 p-6">
|
||||
<div className="flex items-center justify-between text-lg font-bold">
|
||||
<span>{t('cart.subtotal')}</span>
|
||||
<span className="text-cyan-glow">{formatPrice(getCartTotal())}</span>
|
||||
<span className="text-pop-pink">{formatPrice(getCartTotal())}</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 text-center">{t('cart.shippingNote')}</p>
|
||||
<Link
|
||||
href="/checkout"
|
||||
onClick={() => toggleCart(false)}
|
||||
className="btn-primary w-full py-4 text-center block uppercase tracking-widest text-sm"
|
||||
>
|
||||
<p className="text-center text-xs text-gray-500">{t('cart.shippingNote')}</p>
|
||||
<Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-pop-black py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
{t('cart.proceed')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user