Multi-Location Directory

Installation

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

Usage

The file also exports food27Demo, 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 { Food27, food27Demo } from "@/components/blocks/food/food27";

export default function Page() {
  return <Food27 {...food27Demo} />;
}

Props

Types

type LocationItem = {
  name: string;
  image?: MediaSlotImage;
  address: string;
  hours: string;
  phone: string;
  directionsHref?: string;
};

Behavior notes

• Each card's "Get directions" button links out to `directionsHref` (defaulting to "#" when omitted) via `render={<a ... target="_blank" rel="noreferrer" />}`, not a real geolocation lookup.
• hours and address are plain display strings supplied per location, not parsed or validated.
• Venue images use MediaSlot and fall back to a placeholder gradient when a location's image is omitted.