{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "booking-2",
  "title": "Appointment Request Split",
  "description": "Appointment request split pairing reassurance copy with a form for the job needed, a preferred day, vehicle registration, phone, and free text notes.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "field",
    "input",
    "radio-group",
    "select",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/blocks/booking/2/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 { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst SERVICES = [\n  \"Full Service\",\n  \"Interim Service\",\n  \"MOT And Service\",\n  \"Brakes And Discs\",\n  \"Diagnostics\",\n  \"Air Conditioning\",\n]\n\nconst DAYS = [\"Weekday Morning\", \"Weekday Afternoon\", \"Saturday Morning\"]\n\nexport default function BookingBlock() {\n  const [service, setService] = React.useState(SERVICES[0])\n  const [day, setDay] = React.useState(DAYS[0])\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n  }\n\n  return (\n    <section className=\"w-full bg-background px-6 py-16 text-foreground sm:py-24\">\n      <div className=\"mx-auto grid w-full max-w-5xl grid-cols-1 items-start gap-10 md:grid-cols-2 md:gap-14\">\n        <div>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Book Your Car In\n          </h2>\n          <p className=\"mt-4 text-pretty text-muted-foreground\">\n            Tell us what the car needs and when suits. We will call back the\n            same day with a price and a slot.\n          </p>\n          <dl className=\"mt-8 flex flex-col gap-2.5\">\n            {[\n              [\"Courtesy Car\", \"Free with any service booked a week ahead.\"],\n              [\"Collection\", \"We collect within four miles of the workshop.\"],\n              [\"No Surprises\", \"Nothing gets fixed until you have agreed it.\"],\n            ].map(([term, detail]) => (\n              <div\n                key={term}\n                className=\"flex items-start gap-3 rounded-xl bg-card p-4 shadow-sm ring-1 ring-foreground/[0.06]\"\n              >\n                <IconPlaceholder\n                  lucide=\"Check\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"Check\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"mt-0.5 size-4 shrink-0 text-success\"\n                  aria-hidden=\"true\"\n                />\n                <div className=\"min-w-0\">\n                  <dt className=\"text-sm font-medium\">{term}</dt>\n                  <dd className=\"mt-0.5 text-sm text-pretty text-muted-foreground\">\n                    {detail}\n                  </dd>\n                </div>\n              </div>\n            ))}\n          </dl>\n        </div>\n\n        <form\n          onSubmit={handleSubmit}\n          className=\"flex flex-col gap-5 rounded-xl border border-border bg-card p-6\"\n        >\n          <Field>\n            <FieldLabel htmlFor=\"booking-2-service\">What It Needs</FieldLabel>\n            <Select\n              value={service}\n              onValueChange={(value) => setService(String(value))}\n            >\n              <SelectTrigger id=\"booking-2-service\" className=\"w-full\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent align=\"start\" alignItemWithTrigger={false}>\n                {SERVICES.map((item) => (\n                  <SelectItem key={item} value={item}>\n                    {item}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </Field>\n\n          <Field>\n            <FieldLabel>When Suits</FieldLabel>\n            <RadioGroup\n              value={day}\n              onValueChange={(value) => setDay(String(value))}\n              className=\"mt-1 flex flex-col gap-2.5\"\n            >\n              {DAYS.map((option) => (\n                <label\n                  key={option}\n                  className=\"flex items-center gap-2.5 text-sm\"\n                >\n                  <RadioGroupItem value={option} className=\"size-4\" />\n                  {option}\n                </label>\n              ))}\n            </RadioGroup>\n          </Field>\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <Field>\n              <FieldLabel htmlFor=\"booking-2-reg\">Registration</FieldLabel>\n              <Input id=\"booking-2-reg\" placeholder=\"AB12 CDE\" required />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"booking-2-phone\">Phone</FieldLabel>\n              <Input\n                id=\"booking-2-phone\"\n                type=\"tel\"\n                placeholder=\"07700 900123\"\n                required\n              />\n            </Field>\n          </div>\n\n          <Field>\n            <FieldLabel htmlFor=\"booking-2-notes\">\n              Anything We Should Know\n            </FieldLabel>\n            <Textarea\n              id=\"booking-2-notes\"\n              rows={4}\n              placeholder=\"Noise from the front left when braking.\"\n            />\n          </Field>\n\n          <Button type=\"submit\" className=\"w-full\">\n            Request A Slot\n          </Button>\n        </form>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/booking-2.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.432 0.095 166.913)"
    },
    "dark": {
      "success": "oklch(0.765 0.177 163.223)"
    }
  },
  "meta": {
    "height": "674px",
    "tier": "free"
  },
  "categories": [
    "booking"
  ],
  "type": "registry:block"
}