Dish Detail Page

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, media-slot 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/food17.tsx instead.

Usage

The file also exports food17Demo, 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 { Food17, food17Demo } from "@/components/blocks/food/food17";

export default function Page() {
  return <Food17 {...food17Demo} />;
}

Props

Behavior notes

• The quantity selector is real client state (useState), clamped between 1 and 10; the minus button disables at 1 and the plus button disables at 10.
• The star rating display rounds `rating` to the nearest whole star; it is a pure display computation from the prop, not independently editable.
• "Add to cart" is a decorative, inert button with no click handler: there is no real cart or checkout backend wired up, matching every other ordering CTA in this category.
• The dietary badge row only renders when the dietary array has entries.