Store Locator 6 block design & features
A nearby stores locator built with shadcn/ui. A heading and location line sit above a single bordered frame split into a list on the left and a calm grey interactive street map on the right. Each list row has a square storefront photo, the store name, distance, street address and how late it is open today. The map frames every store with a pin and carries a Use my location button.
The list and map are linked in both directions. Hovering or focusing a store marks its row, fills its pin with the primary colour, and grows a small card with a storefront photo, name and hours out of the pin while the other pins fade back. Hovering a pin does the same and highlights the matching row. With nothing hovered, the map rests with every pin equal. The look around the map is restrained and flat with hairline dividers, rounded photos and a soft shadow only on the pin card, and motion is skipped when reduced motion is preferred.
The block reads as a polished, map-first local store finder with a tactile link between list and map, a more interactive take than a static store directory. It is moderately complex and mixed, needing storefront photos and coordinates for each store on a quiet light-grey vector tile map, with building outlines hidden, that can be dragged and zoomed without capturing page scrolling. On mobile the map sits above the list and tapping a store highlights it in the same way.