Template
Rami BitarandClaude Fable 5
f23332e42c
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F22Ms5Cxam5UHyxaCrtZzu
29 lines
1015 B
TypeScript
29 lines
1015 B
TypeScript
"use client";
|
|
|
|
import { useCart } from "@/lib/cart";
|
|
import { content } from "@/lib/content";
|
|
|
|
/**
|
|
* `/cart` checkout button — reads the cart store (client) for `checkoutUrl` and
|
|
* `totalQuantity`. Hidden when the cart is empty. Rendered as a client island
|
|
* inside the server-rendered `/cart` page so it reflects the live cart.
|
|
*/
|
|
export function CartCheckoutButton() {
|
|
const totalQuantity = useCart((state) => state.data.totalQuantity);
|
|
const checkoutUrl = useCart((state) => state.data.checkoutUrl);
|
|
const isEmpty = totalQuantity === 0;
|
|
|
|
if (isEmpty || !checkoutUrl) return null;
|
|
|
|
return (
|
|
<div className="border-border mt-6 border-t pt-4">
|
|
<a
|
|
href={checkoutUrl}
|
|
className="rounded-button button-primary focus-visible:outline-accent inline-flex h-11 w-full items-center justify-center px-4 text-sm font-medium no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
>
|
|
{content.cart.checkout}
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|