Docs
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.
npx shadcn add https://staaarter.com/r/online-ordering-hub.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food3.tsx instead.
Usage
The file also exports food3Demo, 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 { Food3, food3Demo } from "@/components/blocks/food/food3"; export default function Page() { return <Food3 {...food3Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | ReactNode | "Order online" | Section heading. |
| description | string | none | Section intro text below the heading. |
| platforms | DeliveryPlatform[] | [] | Delivery platform cards, each with a fixed icon chosen by array position. |
| pickup | PickupInfo | none | Pickup details banner, omitted entirely when not passed. |
| className | string | none | Extra classes for the outer section element. |
Types
type DeliveryPlatform = { name: string; feeLabel: string; etaLabel: string; href?: string; }; type PickupInfo = { address: string; phone: string; hoursLabel: string; };
Behavior notes
- Platform icons cycle through a fixed 3-icon set indexed by array position, standing in for each platform's real logo, rather than accepting an icon prop per platform.
- The platform grid and the pickup banner render independently: either can be omitted (empty platforms array, or no pickup prop) without leaving broken layout behind.
- This is a plain server component: every button is a real link via the render prop, with no client-side state or event handlers.
More Food Blocks
View all →Loyalty Rewards Program
Four-tier rewards program with points earning steps, benefit lists, and app store download buttons.
Gift Card Shop
Gift card purchase interface with preset amounts, custom input, digital/physical delivery options, and live preview.
Expandable Menu Accordion
Collapsible menu items revealing full images, calorie counts, protein info, and allergen badges.
Daily Specials Chalkboard
Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp.
Dietary Filter Menu
Interactive menu with dietary filter buttons (vegetarian, vegan, gluten-free) and allergen warnings.
Set Menu Pricing Cards
Three-tier pricing cards for group dining with included items, minimum guests, and booking buttons.