soconnor/lewisburg-coffee
1
0
Fork 0
mirror of https://github.com/soconnor0919/lewisburg-coffee.git synced 2026-02-05 08:06:32 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add tooltips to map markers displaying shop names

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 10:25:10 -05:00
parent f816b93c39
commit bdee155760
7 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Drawer.tsx
View File

@@ -48,7 +48,7 @@ export default function Drawer({ shop, shops, onSelect, onClose, isOpen, onToggl
<div
className={`absolute top-20 left-0 h-[calc(100dvh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
>
<Card className="h-full w-full bg-background/40 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0 transition-all duration-300">
<Card className="h-full w-full bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-r-xl p-0 border-0 transition-all duration-300">
{shop ? (
// Details View
// Details View

2
src/components/LocateControl.tsx
View File

@@ -72,7 +72,7 @@ export function LocateControl() {
size="icon"
onClick={handleLocate}
disabled={loading}
className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
>
<Locate className={`h-5 w-5 ${loading ? 'animate-pulse' : ''}`} />
<span className="sr-only">Locate me</span>

10
src/components/Map.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { MapContainer, TileLayer, Marker, useMap } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Tooltip, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { useState, useEffect } from 'react';
@@ -140,7 +140,13 @@ const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
eventHandlers={{
click: () => onShopSelect(shop),
}}
/>
>
<Tooltip direction="top" offset={[0, -20]} opacity={0.9}>
<div className="font-serif font-semibold text-sm">
{shop.name}
</div>
</Tooltip>
</Marker>
))}
</MapContainer>
);

2
src/components/MapStyleControl.tsx
View File

@@ -19,7 +19,7 @@ export function MapStyleControl({ currentStyle, onStyleChange }: MapStyleControl
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground">
<Button variant="outline" size="icon" className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground">
<Layers className="h-5 w-5" />
<span className="sr-only">Change map style</span>
</Button>

2
src/components/Navbar.tsx
View File

@@ -41,7 +41,7 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
return (
<>
<div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none">
<div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
<div className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border border-border/50 rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
<div className="flex items-center gap-2 relative">
{/* Pulsing indicator ring - only during onboarding */}
{isOnboarding && showTooltip && (

6
src/components/ZoomControls.tsx
View File

@@ -13,7 +13,7 @@ export function ZoomControls() {
variant="outline"
size="icon"
onClick={() => map.zoomIn()}
className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
>
<Plus className="h-5 w-5" />
<span className="sr-only">Zoom in</span>
@@ -22,7 +22,7 @@ export function ZoomControls() {
variant="outline"
size="icon"
onClick={() => map.zoomOut()}
className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
>
<Minus className="h-5 w-5" />
<span className="sr-only">Zoom out</span>
@@ -31,7 +31,7 @@ export function ZoomControls() {
variant="outline"
size="icon"
onClick={() => map.setView([40.9645, -76.8845], 15)}
className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
className="bg-background/60 dark:bg-background/65 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground hover:bg-background/70 dark:hover:bg-background/75"
>
<Home className="h-5 w-5" />
<span className="sr-only">Reset view</span>