{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-1",
  "title": "Contact Details And Form",
  "description": "Contact section pairing email, phone, and office details with a message form using a topic select and toast confirmation.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input",
    "select",
    "sonner",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/blocks/contact/1/contact-block.tsx",
      "content": "\"use client\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Field, FieldGroup, 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\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype IconProps = { className?: string; size?: number | string }\n\nconst TOPICS = [\"General inquiry\", \"Sales\", \"Support\", \"Partnership\", \"Other\"]\n\nconst details = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Mail\"\n        tabler=\"IconMail\"\n        hugeicons=\"MailIcon\"\n        phosphor=\"Envelope\"\n        remixicon=\"RiMailLine\"\n        {...p}\n      />\n    ),\n    label: \"Email\",\n    value: \"hello@acme.com\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Phone\"\n        tabler=\"IconPhone\"\n        hugeicons=\"TelephoneIcon\"\n        phosphor=\"Phone\"\n        remixicon=\"RiPhoneLine\"\n        {...p}\n      />\n    ),\n    label: \"Phone\",\n    value: \"+1 (555) 012-3456\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"MapPin\"\n        tabler=\"IconMapPin\"\n        hugeicons=\"MapPinIcon\"\n        phosphor=\"MapPin\"\n        remixicon=\"RiMapPinLine\"\n        {...p}\n      />\n    ),\n    label: \"Office\",\n    value: \"100 Market St, San Francisco\",\n  },\n]\n\nexport default function ContactBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Toaster />\n      <div className=\"grid w-full max-w-5xl grid-cols-1 gap-12 md:grid-cols-2\">\n        <div>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Get in touch\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            Have a question or want to work together? Send us a message and\n            we&apos;ll get back to you within one business day.\n          </p>\n\n          <ul className=\"mt-8 flex flex-col gap-5\">\n            {details.map(({ icon: Icon, label, value }) => (\n              <li key={label} className=\"flex items-center gap-4\">\n                <span className=\"flex size-11 items-center justify-center rounded-lg border border-border bg-muted\">\n                  <Icon className=\"size-5\" aria-hidden=\"true\" />\n                </span>\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">{label}</p>\n                  <p className=\"font-medium\">{value}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n\n        <Card className=\"[--card-spacing:--spacing(6)]\">\n          <form\n            className=\"flex flex-col gap-(--card-spacing)\"\n            onSubmit={(e) => {\n              e.preventDefault()\n              toast.success(\"Message sent. We'll be in touch shortly.\")\n            }}\n          >\n            <CardHeader>\n              <CardTitle className=\"text-base\">Send a message</CardTitle>\n              <CardDescription className=\"text-sm\">\n                Fill out the form and we&apos;ll be in touch shortly.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <FieldGroup>\n                <Field>\n                  <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                  <Input id=\"name\" type=\"text\" placeholder=\"Jane Doe\" />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"you@example.com\"\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                  <Select name=\"topic\">\n                    <SelectTrigger id=\"topic\" className=\"w-full\">\n                      <SelectValue placeholder=\"Select a topic…\" />\n                    </SelectTrigger>\n                    <SelectContent alignItemWithTrigger={false}>\n                      {TOPICS.map((t) => (\n                        <SelectItem key={t} value={t}>\n                          {t}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"message\">Message</FieldLabel>\n                  <Textarea\n                    id=\"message\"\n                    rows={4}\n                    placeholder=\"How can we help?\"\n                  />\n                </Field>\n              </FieldGroup>\n            </CardContent>\n            <CardFooter className=\"border-t-0 pt-0\">\n              <Button type=\"submit\" className=\"w-full\">\n                Send Message\n              </Button>\n            </CardFooter>\n          </form>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/contact-1.tsx"
    }
  ],
  "meta": {
    "height": "580px",
    "tier": "free"
  },
  "categories": [
    "contact"
  ],
  "type": "registry:block"
}