{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "booking-1",
  "title": "Simple Reservation Form",
  "description": "Centered reservation card with date, party size, time, name, and email, for restaurants taking small tables online.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "field",
    "input",
    "select"
  ],
  "files": [
    {
      "path": "registry/blocks/booking/1/booking-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst PARTY_SIZES = [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\"]\n\nconst TIMES = [\n  \"5:30 PM\",\n  \"6:00 PM\",\n  \"6:30 PM\",\n  \"7:00 PM\",\n  \"7:30 PM\",\n  \"8:00 PM\",\n  \"8:30 PM\",\n  \"9:00 PM\",\n]\n\nexport default function BookingBlock() {\n  const [party, setParty] = React.useState(\"2\")\n  const [time, setTime] = React.useState(\"7:30 PM\")\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground sm:py-24\">\n      <div className=\"mx-auto w-full max-w-md\">\n        <div className=\"text-center\">\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Book A Table\n          </h2>\n          <p className=\"mt-4 text-pretty text-muted-foreground\">\n            Up to six people online. For anything larger, give us a call and we\n            will find you the back room.\n          </p>\n        </div>\n\n        <form\n          onSubmit={handleSubmit}\n          className=\"mt-8 flex flex-col gap-4 rounded-xl border border-border bg-card p-6\"\n        >\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <Field>\n              <FieldLabel htmlFor=\"booking-1-date\">Date</FieldLabel>\n              <Input id=\"booking-1-date\" type=\"date\" required />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"booking-1-party\">Party Size</FieldLabel>\n              <Select\n                value={party}\n                onValueChange={(value) => setParty(String(value))}\n              >\n                <SelectTrigger id=\"booking-1-party\" className=\"w-full\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent align=\"start\" alignItemWithTrigger={false}>\n                  {PARTY_SIZES.map((size) => (\n                    <SelectItem key={size} value={size}>\n                      {size}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n\n          <Field>\n            <FieldLabel htmlFor=\"booking-1-time\">Time</FieldLabel>\n            <Select\n              value={time}\n              onValueChange={(value) => setTime(String(value))}\n            >\n              <SelectTrigger id=\"booking-1-time\" className=\"w-full\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent align=\"start\" alignItemWithTrigger={false}>\n                {TIMES.map((slot) => (\n                  <SelectItem key={slot} value={slot}>\n                    {slot}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </Field>\n\n          <Field>\n            <FieldLabel htmlFor=\"booking-1-name\">Name</FieldLabel>\n            <Input id=\"booking-1-name\" placeholder=\"Maya Chen\" required />\n          </Field>\n\n          <Field>\n            <FieldLabel htmlFor=\"booking-1-email\">Email</FieldLabel>\n            <Input\n              id=\"booking-1-email\"\n              type=\"email\"\n              placeholder=\"maya@example.com\"\n              required\n            />\n          </Field>\n\n          <Button type=\"submit\" className=\"mt-2 w-full\">\n            Request Table\n          </Button>\n        </form>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/booking-1.tsx"
    }
  ],
  "meta": {
    "height": "730px",
    "tier": "free"
  },
  "categories": [
    "booking"
  ],
  "type": "registry:block"
}