{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "locations-1", "title": "Locations 1: finder on a world map", "author": "Ballmac ", "description": "A locations finder on a dotted world map: pressable pins, a searchable list, filters by type, and a card for the chosen place with address, contacts, directions and whether it is open now in its own time zone.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dotted-map.json", "https://ui.ballmac.com/r/match-highlight.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/locations-1/locations-1.tsx", "content": "// Ballmac UI: Locations 1. https://ui.ballmac.com/blocks/locations-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { Clock, Mail, MapPin, Phone, Search, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { DottedMap } from \"@/components/ballmac/dotted-map\"\nimport { MatchHighlight, matchesAll, queryTokens } from \"@/components/ballmac/match-highlight\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Locations1Place = {\n id: string\n name: string\n kind: string\n city: string\n country: string\n address: string\n lat: number\n lng: number\n /** Hours from UTC, such as 1 or -5 or 5.5, used for \"open now\". */\n utcOffset: number\n /** Opening hours as 24-hour numbers, 9 and 17.5 for 09:00 to 17:30. Days not listed in `days` are closed. */\n hours: { open: number; close: number; /** 0 is Sunday to 6 is Saturday. Defaults to Monday to Friday. */ days?: number[] }\n phone?: string\n email?: string\n}\n\ntype Locations1Props = Omit, \"title\"> &\n StateProps & {\n places?: Locations1Place[]\n title?: string\n description?: string\n /** An ISO date and time in UTC for \"now\". The block never reads the clock. */\n now?: string\n defaultSelectedId?: string\n onSelect?: (place: Locations1Place) => void\n }\n\nconst sample: Locations1Place[] = [\n { id: \"lis\", name: \"Lisbon HQ\", kind: \"Office\", city: \"Lisbon\", country: \"Portugal\", address: \"Rua da Prata 120, 1100-420 Lisboa\", lat: 38.71, lng: -9.14, utcOffset: 1, hours: { open: 9, close: 18 }, phone: \"+351 21 000 0100\", email: \"lisbon@acme.com\" },\n { id: \"nyc\", name: \"New York studio\", kind: \"Office\", city: \"New York\", country: \"United States\", address: \"88 Orchard St, New York, NY 10002\", lat: 40.72, lng: -73.99, utcOffset: -4, hours: { open: 9, close: 17.5 }, phone: \"+1 212 555 0148\", email: \"nyc@acme.com\" },\n { id: \"sao\", name: \"São Paulo hub\", kind: \"Office\", city: \"São Paulo\", country: \"Brazil\", address: \"Av. Paulista 1578, São Paulo\", lat: -23.56, lng: -46.65, utcOffset: -3, hours: { open: 9, close: 18 }, email: \"saopaulo@acme.com\" },\n { id: \"lon\", name: \"London shop\", kind: \"Store\", city: \"London\", country: \"United Kingdom\", address: \"14 Carnaby St, London W1F 9PS\", lat: 51.51, lng: -0.14, utcOffset: 1, hours: { open: 10, close: 19, days: [0, 1, 2, 3, 4, 5, 6] }, phone: \"+44 20 7946 0958\" },\n { id: \"ber\", name: \"Berlin shop\", kind: \"Store\", city: \"Berlin\", country: \"Germany\", address: \"Torstraße 72, 10119 Berlin\", lat: 52.53, lng: 13.4, utcOffset: 2, hours: { open: 10, close: 20, days: [1, 2, 3, 4, 5, 6] }, phone: \"+49 30 555 0123\" },\n { id: \"lag\", name: \"Lagos office\", kind: \"Office\", city: \"Lagos\", country: \"Nigeria\", address: \"12 Adeola Odeku St, Victoria Island\", lat: 6.43, lng: 3.42, utcOffset: 1, hours: { open: 8, close: 17 }, email: \"lagos@acme.com\" },\n { id: \"dxb\", name: \"Dubai showroom\", kind: \"Store\", city: \"Dubai\", country: \"United Arab Emirates\", address: \"Al Wasl Rd, Jumeirah 1\", lat: 25.2, lng: 55.27, utcOffset: 4, hours: { open: 10, close: 22, days: [0, 1, 2, 3, 4, 5, 6] }, phone: \"+971 4 555 0190\" },\n { id: \"sin\", name: \"Singapore office\", kind: \"Office\", city: \"Singapore\", country: \"Singapore\", address: \"1 Fusionopolis Way, #12-01\", lat: 1.3, lng: 103.79, utcOffset: 8, hours: { open: 9, close: 18 }, email: \"singapore@acme.com\" },\n { id: \"tyo\", name: \"Tokyo shop\", kind: \"Store\", city: \"Tokyo\", country: \"Japan\", address: \"3-18-5 Jingumae, Shibuya\", lat: 35.67, lng: 139.71, utcOffset: 9, hours: { open: 11, close: 20, days: [0, 1, 2, 3, 4, 5, 6] }, phone: \"+81 3 5550 0177\" },\n { id: \"syd\", name: \"Sydney office\", kind: \"Office\", city: \"Sydney\", country: \"Australia\", address: \"200 George St, Sydney NSW 2000\", lat: -33.87, lng: 151.21, utcOffset: 11, hours: { open: 9, close: 17 }, email: \"sydney@acme.com\" },\n]\n\nconst LAT: [number, number] = [-56, 73]\nconst hhmm = (h: number) => `${String(Math.floor(h)).padStart(2, \"0\")}:${String(Math.round((h % 1) * 60)).padStart(2, \"0\")}`\n\nfunction openState(p: Locations1Place, nowMs: number) {\n const local = new Date(nowMs + p.utcOffset * 3_600_000)\n const day = local.getUTCDay()\n const h = local.getUTCHours() + local.getUTCMinutes() / 60\n const days = p.hours.days ?? [1, 2, 3, 4, 5]\n const isOpen = days.includes(day) && h >= p.hours.open && h < p.hours.close\n return { isOpen, text: isOpen ? `Open now · until ${hhmm(p.hours.close)}` : days.includes(day) && h < p.hours.open ? `Closed · opens ${hhmm(p.hours.open)}` : \"Closed now\", local: hhmm(h) }\n}\n\nfunction Skel() {\n return (\n
\n
\n {[0, 1, 2, 3].map((i) => (\n \n ))}\n
\n \n
\n )\n}\n\n/**\n * A locations finder on a dotted world map: pins you can press (each is a real button), a list that searches names, cities and countries, a\n * card for the chosen place with its address, contacts and whether it is open right now in its own time zone. Open-now is worked out from the\n * moment you pass and each place's offset and hours; the block never reads the clock.\n */\nfunction Locations1({\n places = sample,\n title = \"Find us\",\n description = \"Visit a shop, or come by one of our offices. Each one shows whether it is open right now.\",\n now = \"2026-10-19T10:42:00Z\",\n defaultSelectedId,\n onSelect,\n state = \"ready\",\n onRetry,\n emptyState,\n errorState,\n className,\n ...props\n}: Locations1Props) {\n const id = React.useId()\n const all = state === \"empty\" ? [] : places\n const [query, setQuery] = React.useState(\"\")\n const [kind, setKind] = React.useState(null)\n const [selectedId, setSelectedId] = React.useState(defaultSelectedId ?? all[0]?.id)\n const tokens = queryTokens(query)\n const nowMs = Date.parse(now)\n const kinds = [...new Set(all.map((p) => p.kind))]\n const shown = all.filter((p) => (!kind || p.kind === kind) && (!tokens.length || matchesAll(`${p.name} ${p.city} ${p.country} ${p.kind}`, tokens)))\n const selected = all.find((p) => p.id === selectedId)\n const [south, north] = LAT\n const span = north - south\n const choose = (p: Locations1Place) => {\n setSelectedId(p.id)\n onSelect?.(p)\n }\n\n const content = !all.length ? (\n
\n \n \n \n

{emptyState?.title ?? \"No locations yet\"}

\n

{emptyState?.description ?? \"When a shop or office opens, it appears here with its hours.\"}

\n {emptyState?.action}\n
\n ) : (\n
\n
\n
\n \n setQuery(e.target.value)} className=\"placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-sm outline-none\" />\n
\n {kinds.length > 1 ? (\n
\n {[null, ...kinds].map((k) => (\n \n ))}\n
\n ) : null}\n

\n {shown.length} {shown.length === 1 ? \"place\" : \"places\"}\n

\n {shown.length ? (\n
    \n {shown.map((p) => {\n const o = openState(p, nowMs)\n const on = p.id === selectedId\n return (\n
  • \n choose(p)}\n className={cn(\"bg-card focus-visible:ring-ring/50 hover:border-foreground/30 w-full rounded-2xl border p-4 text-start outline-none transition-[border-color,box-shadow] focus-visible:ring-[3px] motion-reduce:transition-none\", on && \"border-foreground ring-foreground ring-1\")}\n >\n \n \n \n \n {p.kind}\n \n \n \n \n \n \n {o.text}\n \n \n
    • \n )\n })}\n
\n ) : (\n
\n

Nothing matches

\n

Try a city or a country.

\n \n
\n )}\n
\n\n
\n
\n
\n \n {shown.map((p) => {\n const on = p.id === selectedId\n return (\n choose(p)}\n className=\"focus-visible:ring-ring/60 absolute -translate-x-1/2 -translate-y-1/2 rounded-full p-2 outline-none focus-visible:ring-[3px]\"\n style={{ left: `${((p.lng + 180) / 360) * 100}%`, top: `${((north - p.lat) / span) * 100}%` }}\n >\n \n \n )\n })}\n
\n
\n\n {selected ? (\n
\n
\n
\n

{selected.kind}

\n

\n {selected.name}\n

\n
\n {(() => {\n const o = openState(selected, nowMs)\n return (\n

\n \n {o.text}\n

\n )\n })()}\n
\n
\n
\n
Address
\n \n
{selected.address}
\n
\n
\n
Local time
\n \n
\n {openState(selected, nowMs).local} there · {hhmm(selected.hours.open)} to {hhmm(selected.hours.close)}\n
\n
\n {selected.phone ? (\n
\n
Phone
\n \n
\n \n {selected.phone}\n \n
\n
\n ) : null}\n {selected.email ? (\n
\n
Email
\n \n
\n \n {selected.email}\n \n
\n
\n ) : null}\n
\n \n Get directions to {selected.name} (opens in a new tab)\n \n
\n ) : null}\n
\n
\n )\n\n return (\n
\n
\n

\n {title}\n

\n

{description}

\n
\n } error={{ title: errorState?.title ?? \"Locations could not be loaded\", description: errorState?.description ?? \"Check your connection and try again.\", ...errorState }}>\n {content}\n \n
\n )\n}\n\nexport { Locations1, type Locations1Props, type Locations1Place }\n", "type": "registry:component", "target": "@components/ballmac/blocks/locations-1/locations-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "locations", "store locator", "offices", "map", "find us", "stores", "branches", "opening hours", "contact" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "A locations finder. . Open now, closing and opening times are worked out from now, each utcOffset and hours (days default to Monday to Friday). Pass now yourself; the block never reads the clock. Pins are real buttons placed from lat and lng.", "whenToUse": [ "A contact or find-us page for a business with several offices or shops", "A store locator on a marketing site" ], "whenNotToUse": [ "One address with a map embed", "Turn-by-turn routes or live traffic" ], "composesWith": [ "contact-1", "footer-1", "about-1", "directory-1" ], "a11y": [ { "keys": "Tab", "action": "Search, type filter, each place in the list as one button (pressed when chosen), then the pins, which are the same places as buttons with their name and city" }, { "keys": "Open now", "action": "Written as 'Open now · until 18:00' or 'Closed · opens 09:00', beside a dot, never by color alone" }, { "keys": "Links", "action": "Phone, email and directions are real links; directions says it opens in a new tab" } ], "customization": [ "Hours can be half hours (17.5) and any set of days", "Phone numbers are shown left to right in right-to-left layouts, like any number", "The map and its pins keep their geography in every language" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "locations-1-loading", "trigger": "state=\"loading\"", "note": "A skeleton list and map under the real heading, announced as loading." }, { "id": "empty", "title": "No locations", "example": "locations-1-empty", "trigger": "state=\"empty\" (or places={[]})", "note": "Says places appear when a shop or office opens; emptyState sets the copy. A search with no match says so with Clear." }, { "id": "error", "title": "Could not load", "example": "locations-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry)." } ], "examples": [ "locations-1-demo", "locations-1-night", "locations-1-loading", "locations-1-empty", "locations-1-error" ], "url": "https://ui.ballmac.com/components/locations-1" }, "categories": [ "blocks", "locations" ], "type": "registry:block" }