Store Locator

1"use client";
2 
3import { useMemo, useState, type CSSProperties } from "react";
4 
5import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
6import { StoreList } from "./components/store-list";
7import { LocatorMap } from "./components/locator-map";
8import { MAP_CENTER, stores } from "./data";
9 
10export default function Page() {
11  const [query, setQuery] = useState("");
12  const [selectedId, setSelectedId] = useState<string | null>(stores[0].id);
13 
14  const filtered = useMemo(() => {
15    const q = query.trim().toLowerCase();
16    if (!q) return stores;
17    return stores.filter(
18      (store) =>
19        store.name.toLowerCase().includes(q) ||
20        store.address.toLowerCase().includes(q) ||
21        store.neighborhood.toLowerCase().includes(q),
22    );
23  }, [query]);
24 
25  return (
26    <SidebarProvider style={{ "--sidebar-width": "20rem" } as CSSProperties}>
27      <StoreList
28        stores={filtered}
29        query={query}
30        onQueryChange={setQuery}
31        selectedId={selectedId}
32        onSelect={setSelectedId}
33      />
34 
35      <SidebarInset>
36        <LocatorMap
37          stores={filtered}
38          selectedId={selectedId}
39          onSelect={setSelectedId}
40          onClearSelection={() => setSelectedId(null)}
41          center={MAP_CENTER}
42        />
43      </SidebarInset>
44    </SidebarProvider>
45  );
46}