{"success":true,"data":{"block":{"id":"contact-map","name":"Contact Map","title":"Contact Map","category":"Contact","categorySlug":"contact","description":"Contact form with integrated map display. Shows location information alongside contact form fields.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306767/j15p7ibisfp2ta6bunl3d1ondmu5/contact-map-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306768/9oobx5aup7bsdks8fn77o1jz3qrt/contact-map-mobile.jpg"},"componentPath":"blocks/contact/contact-map.tsx","code":"\"use client\";\n\nimport { ContactMap } from \"@opensite/ui/blocks/contact/contact-map\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { stadiaApiKey } from \"@/lib/tools\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\nimport type { GeoMapMarker, GeoMapProps } from \"@page-speed/maps\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"full_name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Your name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"text\",\n    label: \"Subject\",\n    placeholder: \"Brief subject line\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Message\",\n    placeholder: \"Your message...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nconst downtownPhoenixMarker: GeoMapMarker = {\n  id: \"downtown-phx-craft\",\n  latitude: 33.4585232,\n  longitude: -112.0715382,\n  pinColor: \"#f97316\",\n  eyebrow: \"Phoenix Flagship\",\n  title: \"Downtown PHX Craft\",\n  summary:\n    \"A central downtown gathering space with elevated craft cocktails, chef-driven small plates, and late-night service.\",\n  locationLine: \"128 E Roosevelt St, Phoenix, AZ 85004\",\n  locationUrl: \"https://maps.app.goo.gl/D8XXe5tt7av4GFEh8\",\n  hoursLine: \"Mon-Sun: 11:00 AM - 12:00 AM\",\n  mediaItems: [\n    {\n      id: \"downtown-media-1\",\n      src: imagePlaceholders[113],\n      alt: \"Downtown PHX Craft signature espresso martini\",\n    },\n  ],\n  markerContentComponent: (\n    <div className=\"mt-2 space-y-1.5 text-xs text-muted-foreground\">\n      <p className=\"font-medium text-foreground\">Highlights</p>\n      <ul className=\"list-disc space-y-1 pl-4\">\n        <li>Happy hour daily from 4 PM - 6 PM</li>\n        <li>Private event lounge available</li>\n        <li>Chef tasting menu on Fridays and Saturdays</li>\n      </ul>\n    </div>\n  ),\n  actions: [\n    {\n      label: \"Directions\",\n      href: \"https://maps.app.goo.gl/D8XXe5tt7av4GFEh8\",\n      icon: <DynamicIcon name=\"lucide/navigation\" size={14} />,\n      variant: \"default\",\n      className: \"shrink-0 flex-1 rounded-md\",\n      size: \"md\",\n    },\n    {\n      href: \"#\",\n      iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={14} />,\n      variant: \"outline\",\n      size: \"icon\",\n      className: \"rounded-md\",\n    },\n  ],\n};\n\nconst northScottsdaleMarker: GeoMapMarker = {\n  id: \"north-scottsdale\",\n  latitude: 33.6510546,\n  longitude: -111.924473,\n  pinColor: \"#0ea5e9\",\n  eyebrow: \"Scottsdale Location\",\n  title: \"North Scottsdale\",\n  summary:\n    \"A modern North Scottsdale location designed for group dining, premium cocktails, and weekend experiences.\",\n  locationLine: \"17797 N Scottsdale Rd, Scottsdale, AZ 85255\",\n  hoursLine: \"Mon-Sun: 10:00 AM - 11:00 PM\",\n  mediaItems: [\n    {\n      id: \"scottsdale-media-1\",\n      src: imagePlaceholders[112],\n      alt: \"North Scottsdale venue interior\",\n    },\n    {\n      id: \"scottsdale-media-2\",\n      src: imagePlaceholders[119],\n      alt: \"Fine dining and cocktails at North Scottsdale\",\n    },\n    {\n      id: \"scottsdale-media-3\",\n      src: imagePlaceholders[123],\n      alt: \"Guests dining at North Scottsdale\",\n    },\n  ],\n  actions: [\n    {\n      label: \"Directions\",\n      href: \"https://maps.app.goo.gl/d1h87KXhi9gBPAJj9\",\n      icon: <DynamicIcon name=\"lucide/navigation\" size={14} />,\n      className: \"shrink-0 flex-1 rounded-md\",\n      size: \"md\",\n    },\n    {\n      href: \"#\",\n      iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={14} />,\n      variant: \"outline\",\n      size: \"icon\",\n      className: \"rounded-md\",\n    },\n  ],\n};\n\nconst mapProps: GeoMapProps = {\n  stadiaApiKey,\n  panelPosition: \"bottom-left\",\n  mapWrapperClassName: \"rounded-lg border border-border\",\n  showNavigationControl: true,\n  showGeolocateControl: true,\n  mapSize: {\n    desktop: 700,\n    mobile: 600,\n  },\n  markers: [downtownPhoenixMarker, northScottsdaleMarker],\n  // clusters: [\n  //   {\n  //     id: \"north-east-valley-cluster\",\n  //     label: \"Clustered Region Example\",\n  //     title: \"North Scottsdale Region\",\n  //     summary:\n  //       \"This demonstrates the optional clustered format used when multiple locations should be grouped under a region.\",\n  //     pinColor: \"#0284c7\",\n  //     markers: [northScottsdaleMarker],\n  //   },\n  // ],\n};\n\nexport default function Demo() {\n  return (\n    <ContactMap\n      heading=\"Contact Us\"\n      description=\"We're here to help! Send us a message and we'll respond within 24 hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for contacting us! We'll get back to you within 24 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.9}\n      mapProps={mapProps}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"contentGridClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"mapColumnClassName":{"type":"string","description":"Additional CSS classes for the map column wrapper","required":false},"mapClassName":{"type":"string","description":"Additional CSS classes for the map component wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"mapProps":{"type":"object","description":"Geo map configuration and marker data","typeLabel":"GeoMapProps","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","map","location","form","address"],"performance":{},"importantUsageNotes":"Only use locations assigned to the website (if this is a general contact block), if it's region specific, only use locations assigned to that region, if this is a single location specific pages, only use the location data for the single location."}},"timestamp":"2026-05-13T10:37:42.008Z"}