90 lines
4.0 KiB
TypeScript
90 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { X, Plus, Minus, ShoppingBag } from "lucide-react";
|
|
import { useCart } from "@/contexts/CartContext";
|
|
import { useLanguage } from "@/contexts/LanguageContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
|
|
export default function CartDrawer() {
|
|
const { items, isCartOpen, setIsCartOpen, updateQuantity, removeItem, totalPrice, totalItems } = useCart();
|
|
const { t } = useLanguage();
|
|
|
|
if (!isCartOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Overlay */}
|
|
<div className="fixed inset-0 bg-foreground/40 z-50" onClick={() => setIsCartOpen(false)} />
|
|
|
|
{/* Drawer */}
|
|
<div className="fixed right-0 top-0 h-full w-full max-w-md bg-background z-50 shadow-2xl flex flex-col animate-in slide-in-from-right duration-300">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
|
<h2 className="font-serif text-lg font-semibold flex items-center gap-2">
|
|
<ShoppingBag className="h-5 w-5" />
|
|
{t("cart.title")} ({totalItems})
|
|
</h2>
|
|
<button onClick={() => setIsCartOpen(false)} className="p-1 hover:bg-muted rounded-md transition-colors">
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Items */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-4">
|
|
{items.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
|
|
<ShoppingBag className="h-12 w-12 mb-4 opacity-30" />
|
|
<p className="text-sm">{t("cart.empty")}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{items.map((item) => (
|
|
<div key={`${item.product.id}-${item.selectedColor}-${item.selectedLength}`} className="flex gap-4 py-3 border-b border-border last:border-0">
|
|
<img
|
|
src={item.product.image}
|
|
alt={item.product.name}
|
|
className="w-20 h-24 object-cover rounded-md"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-medium truncate">{item.product.name}</h3>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{item.selectedColor} • {item.selectedLength}</p>
|
|
<p className="text-sm font-semibold mt-1">{item.product.price} €</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<button onClick={() => updateQuantity(item.product.id, item.quantity - 1)} className="p-1 border border-border rounded hover:bg-muted">
|
|
<Minus className="h-3 w-3" />
|
|
</button>
|
|
<span className="text-sm w-6 text-center">{item.quantity}</span>
|
|
<button onClick={() => updateQuantity(item.product.id, item.quantity + 1)} className="p-1 border border-border rounded hover:bg-muted">
|
|
<Plus className="h-3 w-3" />
|
|
</button>
|
|
<button onClick={() => removeItem(item.product.id)} className="ml-auto text-xs text-muted-foreground hover:text-destructive">
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{items.length > 0 && (
|
|
<div className="border-t border-border px-6 py-4 space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-medium">{t("cart.total")}</span>
|
|
<span className="font-serif text-lg font-semibold">{totalPrice.toFixed(2)} €</span>
|
|
</div>
|
|
<Link href="/panier" onClick={() => setIsCartOpen(false)}>
|
|
<Button className="w-full" size="lg">
|
|
{t("cart.checkout")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|