4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T532,"use client"; import { useMemo, useState, type CSSProperties } from "react"; import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"; import { StoreList } from "./components/store-list"; import { LocatorMap } from "./components/locator-map"; import { MAP_CENTER, stores } from "./data"; export default function Page() { const [query, setQuery] = useState(""); const [selectedId, setSelectedId] = useState(stores[0].id); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return stores; return stores.filter( (store) => store.name.toLowerCase().includes(q) || store.address.toLowerCase().includes(q) || store.neighborhood.toLowerCase().includes(q), ); }, [query]); return ( setSelectedId(null)} center={MAP_CENTER} /> ); } 51:T87a,export interface Store { id: string; name: string; address: string; neighborhood: string; phone: string; hours: string; openNow: boolean; lat: number; lng: number; } export const MAP_CENTER: [number, number] = [-122.4194, 37.7749]; export const stores: Store[] = [ { id: "ferry-building", name: "Ferry Building", address: "1 Ferry Building", neighborhood: "Embarcadero", phone: "(415) 555-0142", hours: "7:00 AM – 8:00 PM", openNow: true, lat: 37.7955, lng: -122.3933, }, { id: "union-square", name: "Union Square", address: "333 Post St", neighborhood: "Downtown", phone: "(415) 555-0188", hours: "6:30 AM – 9:00 PM", openNow: true, lat: 37.788, lng: -122.4075, }, { id: "north-beach", name: "North Beach", address: "601 Columbus Ave", neighborhood: "North Beach", phone: "(415) 555-0119", hours: "7:00 AM – 7:00 PM", openNow: true, lat: 37.8003, lng: -122.4097, }, { id: "hayes-valley", name: "Hayes Valley", address: "450 Hayes St", neighborhood: "Hayes Valley", phone: "(415) 555-0163", hours: "7:30 AM – 6:00 PM", openNow: false, lat: 37.7765, lng: -122.4256, }, { id: "mission", name: "Mission District", address: "2901 Mission St", neighborhood: "Mission", phone: "(415) 555-0177", hours: "6:00 AM – 8:00 PM", openNow: true, lat: 37.7509, lng: -122.4181, }, { id: "marina", name: "Marina", address: "2156 Chestnut St", neighborhood: "Marina", phone: "(415) 555-0125", hours: "7:00 AM – 7:00 PM", openNow: false, lat: 37.8003, lng: -122.4366, }, { id: "castro", name: "Castro", address: "489 Castro St", neighborhood: "Castro", phone: "(415) 555-0151", hours: "7:00 AM – 8:00 PM", openNow: true, lat: 37.7609, lng: -122.435, }, { id: "soma", name: "SoMa", address: "680 Folsom St", neighborhood: "SoMa", phone: "(415) 555-0134", hours: "6:30 AM – 6:30 PM", openNow: true, lat: 37.7852, lng: -122.3982, }, ]; 52:T13a9,"use client"; import { useEffect, useRef } from "react"; import { Clock, MapPin, Phone, Search } from "lucide-react"; import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarSeparator, } from "@/components/ui/sidebar"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; import type { Store } from "../data"; interface StoreListProps { stores: Store[]; query: string; onQueryChange: (value: string) => void; selectedId: string | null; onSelect: (id: string) => void; } export function StoreList({ stores, query, onQueryChange, selectedId, onSelect, }: StoreListProps) { const itemRefs = useRef(new Map()); useEffect(() => { if (!selectedId) return; itemRefs.current .get(selectedId) ?.scrollIntoView({ block: "nearest", behavior: "smooth" }); }, [selectedId]); return (

Find a store

{stores.length} {stores.length === 1 ? "location" : "locations"}{" "} near you

onQueryChange(e.target.value)} placeholder="Search name or address" className="bg-background pl-8" aria-label="Search stores" />

{stores.length === 0 ? (

No stores match your search.

) : ( {stores.map((store) => { const active = store.id === selectedId; return ( ); })} )} ); } 53:Tf58,"use client"; import { useEffect } from "react"; import { Clock, MapPin, Phone } from "lucide-react"; import { Map, MapControls, MapMarker, MapPopup, MarkerContent, MarkerTooltip, useMap, } from "@/components/ui/map"; import { SidebarTrigger } from "@/components/ui/sidebar"; import { cn } from "@/lib/utils"; import type { Store } from "../data"; interface LocatorMapProps { stores: Store[]; selectedId: string | null; onSelect: (id: string) => void; onClearSelection: () => void; center: [number, number]; } function FlyToSelected({ store }: { store?: Store }) { const { map } = useMap(); useEffect(() => { if (!map || !store) return; map.flyTo({ center: [store.lng, store.lat], zoom: 14, duration: 800, essential: true, }); }, [map, store]); return null; } function StorePin({ active }: { active: boolean }) { return (

); } export function LocatorMap({ stores, selectedId, onSelect, onClearSelection, center, }: LocatorMapProps) { const selected = stores.find((store) => store.id === selectedId); return (

{stores.map((store) => ( onSelect(store.id)} > {store.name} ))} {selected && (

{selected.name}

{selected.openNow ? "Open now" : "Closed"}

{selected.address}, {selected.neighborhood}

{selected.hours}

{selected.phone}

)}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@mapcn","registryDependencies":["@mapcn/map","input","sidebar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/store-locator/page.tsx","content":"$50","type":"registry:page","target":"app/store-locator/page.tsx"},{"path":"src/registry/blocks/store-locator/data.ts","content":"$51","type":"registry:component","target":"app/store-locator/data.ts"},{"path":"src/registry/blocks/store-locator/components/store-list.tsx","content":"$52","type":"registry:component","target":"app/store-locator/components/store-list.tsx"},{"path":"src/registry/blocks/store-locator/components/locator-map.tsx","content":"$53","type":"registry:component","target":"app/store-locator/components/locator-map.tsx"}],"className":"h-[70svh] min-h-80"}]]}]