vibeasite-templates/template-ecommerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: ecommerce template (24 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:55:43 +00:00
parent 6806346511
commit b15d1e089e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.tsx
+4 -4
View File
@@ -34,7 +34,7 @@ export default function Header() {
}, []); }, []);
return ( return (
<header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${ <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
scrolled ? "backdrop-blur-xl bg-white/80 dark:bg-slate-900/80 border-white/20 border-b border-stone-100 shadow-sm" : "bg-white/80 backdrop-blur-sm" scrolled ? "backdrop-blur-xl bg-white/80 dark:bg-slate-900/80 border-white/20 border-b border-stone-100 shadow-sm" : "bg-white/80 backdrop-blur-sm"
}`}> }`}>
{/* Top Banner */} {/* Top Banner */}
@@ -67,7 +67,7 @@ export default function Header() {
</Button> </Button>
<Sheet> <Sheet>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button variant={itemCount > 0 ? "default" : "ghost"} size="icon" className={`relative h-9 w-9 transition-all \${itemCount > 0 ? "bg-stone-900 hover:bg-stone-800 text-white" : ""}`}> <Button variant={itemCount > 0 ? "default" : "ghost"} size="icon" className={`relative h-9 w-9 transition-all ${itemCount > 0 ? "bg-stone-900 hover:bg-stone-800 text-white" : ""}`}>
<ShoppingBag className="h-4 w-4" /> <ShoppingBag className="h-4 w-4" />
{itemCount > 0 && ( {itemCount > 0 && (
<span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-rose-500 text-[10px] font-bold text-white flex items-center justify-center ring-2 ring-white animate-fade-in"> <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-rose-500 text-[10px] font-bold text-white flex items-center justify-center ring-2 ring-white animate-fade-in">
@@ -85,14 +85,14 @@ export default function Header() {
<p className="font-medium">{item.name}</p> <p className="font-medium">{item.name}</p>
<p className="text-stone-500 text-xs">Qty: {item.qty}</p> <p className="text-stone-500 text-xs">Qty: {item.qty}</p>
</div> </div>
<span className="font-semibold">\${(item.price * item.qty).toFixed(2)}</span> <span className="font-semibold">${(item.price * item.qty).toFixed(2)}</span>
</div> </div>
))} ))}
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
<div className="flex justify-between text-sm font-bold mb-4"> <div className="flex justify-between text-sm font-bold mb-4">
<span>Subtotal</span> <span>Subtotal</span>
<span>\${cartPreviewItems.reduce((s, i) => s + i.price * i.qty, 0).toFixed(2)}</span> <span>${cartPreviewItems.reduce((s, i) => s + i.price * i.qty, 0).toFixed(2)}</span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Button asChild variant="outline" className="w-full rounded-full"> <Button asChild variant="outline" className="w-full rounded-full">