95 lines
4.9 KiB
TypeScript
95 lines
4.9 KiB
TypeScript
"use client"
|
|
import Image from 'next/image'
|
|
import { X, ShoppingBag, Plus, Minus, Trash2 } from 'lucide-react'
|
|
import Link from './LocalizedLink'
|
|
import { useCartStore } from '../store/cartStore'
|
|
import { formatPrice } from '@homaroma/types'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function CartDrawer() {
|
|
const { t } = useTranslation()
|
|
const { isCartOpen, toggleCart, items, updateQuantity, removeFromCart, getCartTotal } = useCartStore()
|
|
|
|
if (!isCartOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex justify-end">
|
|
<div className="absolute inset-0 bg-text-main/45 backdrop-blur-sm" onClick={() => toggleCart(false)} />
|
|
|
|
<div className="relative flex h-full w-full max-w-md flex-col border-l border-line-primary/20 bg-surface-card shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-line-primary/20 bg-surface-page/70 p-6">
|
|
<h2 className="flex items-center gap-2 text-xl font-bold text-text-main">
|
|
<ShoppingBag className="h-5 w-5 text-brand-primary" />
|
|
{t('cart.title')}
|
|
<span className="ml-2 rounded-full bg-surface-card px-2 py-0.5 text-sm font-normal text-muted-text">
|
|
{t('cart.items', { count: items.length })}
|
|
</span>
|
|
</h2>
|
|
<button onClick={() => toggleCart(false)} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition-colors hover:text-brand-primary">
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-6 overflow-y-auto p-6">
|
|
{items.length === 0 ? (
|
|
<div className="flex h-full flex-col items-center justify-center space-y-4 text-muted-text">
|
|
<ShoppingBag className="h-16 w-16 opacity-30" />
|
|
<p>{t('cart.empty')}</p>
|
|
<button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-brand-primary hover:underline">
|
|
{t('cart.continueShopping')}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
items.map((item) => (
|
|
<div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-line-primary/20 bg-surface-page/60 p-4">
|
|
<div className="relative h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-surface-card">
|
|
<Image
|
|
src={item.productImage || '/images/fallback-product.svg'}
|
|
alt={item.productName}
|
|
fill
|
|
unoptimized
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative flex flex-1 flex-col space-y-1 pt-1">
|
|
<h3 className="pr-6 text-sm font-bold leading-tight text-text-main">{item.productName}</h3>
|
|
{item.variantName && <p className="text-xs text-muted-text">{item.variantName}</p>}
|
|
<p className="mt-auto text-sm font-bold text-brand-primary">{formatPrice(item.price)}</p>
|
|
|
|
<div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-line-primary/20 bg-surface-card">
|
|
<button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-brand-primary">
|
|
<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 transition-colors hover:text-brand-primary">
|
|
<Plus className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-muted-text/60 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{items.length > 0 && (
|
|
<div className="space-y-6 border-t border-line-primary/20 bg-surface-page/70 p-6">
|
|
<div className="flex items-center justify-between text-lg font-bold">
|
|
<span>{t('cart.subtotal')}</span>
|
|
<span className="text-brand-primary">{formatPrice(getCartTotal())}</span>
|
|
</div>
|
|
<p className="text-center text-xs text-muted-text">{t('cart.shippingNote')}</p>
|
|
<Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary">
|
|
{t('cart.proceed')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|