Gift Card Shop

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food2.tsx instead.

Usage

The file also exports food2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Food2, food2Demo } from "@/components/blocks/food/food2";

export default function Page() {
  return <Food2 {...food2Demo} />;
}

Props

Behavior notes

• Real client-side state: selecting a preset amount clears any typed custom amount, and typing a custom amount clears the preset selection, so exactly one source of truth drives the displayed total at a time.
• The delivery method toggle (digital vs. physical) is a real native radio group, styled as cards, not just a decorative pair of buttons.
• The preview panel on the right is derived directly from the current amount and delivery method state, so it updates live as either changes.
• The "Add to cart" button is decorative; it has no click handler since there is no real cart/checkout backend behind this block.