{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map-compare-01",
  "title": "Compare two styles example",
  "description": "Drag a divider across Vancouver to compare the base and outdoor styles, composed from the compare-swipe item and your Badge.",
  "registryDependencies": [
    "https://registry.unmap.dev/r/map.json",
    "https://registry.unmap.dev/r/compare-swipe.json",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/map-compare-01.tsx",
      "content": "\"use client\";\n\nimport { CompareSwipe } from \"@/components/ui/compare-swipe\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nconst COPY = {\n  en: {\n    noKey: \"Add your unmap key to load the map.\",\n    title: \"Compare two styles\",\n    hint: \"Drag the divider to compare the base and outdoor styles.\",\n    before: \"Base\",\n    after: \"Outdoor\",\n  },\n  fr: {\n    noKey: \"Ajoutez votre clé unmap pour charger la carte.\",\n    title: \"Comparer deux styles\",\n    hint: \"Faites glisser le séparateur pour comparer les styles base et outdoor.\",\n    before: \"Base\",\n    after: \"Outdoor\",\n  },\n} as const;\n\n/**\n * A minimal example: Vancouver in the base style left of the divider and the outdoor style right\n * of it, on one shared camera. Drag the divider, or focus it and use the arrow keys. Each side\n * names its style in a corner of its own map, so the name slides away with it.\n */\nexport function MapCompare({\n  apiKey,\n  lang = \"en\",\n  className,\n}: {\n  /** Your Unmap browser key. */\n  apiKey: string;\n  /** Language of the copy, the divider's label and the map labels: \"en\" (default) or \"fr\". */\n  lang?: \"en\" | \"fr\";\n  className?: string;\n}) {\n  const copy = COPY[lang];\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      <div role=\"region\" aria-label={copy.title} className=\"relative h-96\">\n        <CompareSwipe\n          apiKey={apiKey}\n          center={[-123.12, 49.28]}\n          zoom={12}\n          lang={lang}\n          before={{\n            style: \"base\",\n            lang,\n            children: (\n              <Badge variant=\"secondary\" className=\"absolute top-2.5 left-2.5 z-10\">\n                {copy.before}\n              </Badge>\n            ),\n          }}\n          after={{\n            style: \"outdoor\",\n            lang,\n            // Clear of the zoom and compass buttons in the after map's top-right corner.\n            children: (\n              <Badge variant=\"secondary\" className=\"absolute top-2.5 right-12 z-10\">\n                {copy.after}\n              </Badge>\n            ),\n          }}\n          className=\"h-full\"\n        />\n      </div>\n      {/* No key, no map: one line says what to add. */}\n      {apiKey.trim() === \"\" ? <p className=\"text-xs text-muted-foreground\">{copy.noKey}</p> : null}\n      <p className=\"text-sm text-muted-foreground\">{copy.hint}</p>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/unmap-map-compare.tsx"
    }
  ],
  "docs": "Import MapCompare from your components/unmap-map-compare file and pass apiKey (your Unmap browser key). Use lang=\"fr\" for French. Allow your site origin on the key. Preview: https://unmap.dev/templates/map-compare",
  "categories": [
    "examples",
    "maps"
  ],
  "type": "registry:block"
}