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

feat: Add tooltip component and refactor Navbar placement to enhance map loading and mobile discovery panel behavior.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 02:26:28 -05:00
parent 604cd14698
commit dd10456a6e
7 changed files with 146 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bun.lock
View File

@@ -10,6 +10,7 @@
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tooltip": "^1.2.8",
"@t3-oss/env-nextjs": "^0.12.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -255,6 +256,8 @@
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
"@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
"@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
"@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -269,6 +272,8 @@
"@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
"@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
"@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
"@react-leaflet/core": ["@react-leaflet/core@3.0.0", "", { "peerDependencies": { "leaflet": "^1.9.0", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ=="],
@@ -995,6 +1000,8 @@
"@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
"@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],

1
package.json
View File

@@ -21,6 +21,7 @@
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tooltip": "^1.2.8",
"@t3-oss/env-nextjs": "^0.12.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",

23
src/app/page.tsx
View File

@@ -1,8 +1,9 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import MapLoader from "~/components/MapLoader";
import Drawer from "~/components/Drawer";
import Navbar from "~/components/Navbar";
import { COFFEE_SHOPS } from "~/lib/data";
import { WelcomeModal } from "~/components/WelcomeModal";
@@ -10,9 +11,23 @@ import { WelcomeModal } from "~/components/WelcomeModal";
export default function HomePage() {
const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
const [isMapLoaded, setIsMapLoaded] = useState(false);
useEffect(() => {
// Hide discovery panel on mobile initially
const isMobile = window.innerWidth < 640; // sm breakpoint
setIsDiscoveryOpen(!isMobile);
// Mark map as loaded after a short delay
const timer = setTimeout(() => setIsMapLoaded(true), 500);
return () => clearTimeout(timer);
}, []);
return (
<main className="relative h-dvh w-screen overflow-hidden bg-black text-white font-serif">
{/* Navbar - always visible */}
<Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={() => setIsDiscoveryOpen(!isDiscoveryOpen)} />
{/* Map Background */}
<div className="absolute inset-0 z-0">
<MapLoader
@@ -22,12 +37,11 @@ export default function HomePage() {
setIsDiscoveryOpen(true);
}}
selectedShop={selectedShop}
isDiscoveryOpen={isDiscoveryOpen}
onToggleDiscovery={() => setIsDiscoveryOpen(!isDiscoveryOpen)}
/>
</div>
{/* Right Drawer */}
{/* Right Drawer - only show after map loads */}
{isMapLoaded && (
<Drawer
shop={selectedShop}
shops={COFFEE_SHOPS}
@@ -35,6 +49,7 @@ export default function HomePage() {
onClose={() => setSelectedShop(null)}
isOpen={isDiscoveryOpen}
/>
)}
<WelcomeModal />
</main>
);

8
src/components/Map.tsx
View File

@@ -1,11 +1,10 @@
"use client";
import { MapContainer, TileLayer, Marker, useMap } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { useState, useEffect } from 'react';
import { useTheme } from "next-themes";
import Navbar from "./Navbar";
import { MapStyleControl } from "./MapStyleControl";
import { LocateControl } from './LocateControl';
import { ZoomControls } from "./ZoomControls";
@@ -26,8 +25,6 @@ interface MapProps {
shops: CoffeeShop[];
onShopSelect: (shop: CoffeeShop) => void;
selectedShop: CoffeeShop | null;
isDiscoveryOpen: boolean;
onToggleDiscovery: () => void;
}
const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) => {
@@ -45,7 +42,7 @@ const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) =>
return null;
};
const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapProps) => {
const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
useEffect(() => {
// Fix for Leaflet default icon not found
// @ts-expect-error Fix for Leaflet default icon not found
@@ -125,7 +122,6 @@ const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDisco
zoomControl={false}
attributionControl={false}
>
<Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />
<MapController selectedShop={selectedShop} />
<div className="absolute bottom-8 right-4 z-[1000] flex flex-col gap-2 items-end">
<LocateControl />

13
src/components/MapLoader.tsx
View File

@@ -3,7 +3,7 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { Skeleton } from "~/components/ui/skeleton";
import { Coffee } from "lucide-react";
import { Coffee, Loader2 } from "lucide-react";
interface CoffeeShop {
id: number;
@@ -21,11 +21,9 @@ interface MapLoaderProps {
shops: CoffeeShop[];
onShopSelect: (shop: CoffeeShop) => void;
selectedShop: CoffeeShop | null;
isDiscoveryOpen: boolean;
onToggleDiscovery: () => void;
}
export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
const [isLoading, setIsLoading] = useState(true);
const Map = dynamic(() => import("./Map"), {
@@ -33,8 +31,9 @@ export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscove
loading: () => (
<div className="w-full h-full relative bg-background">
<Skeleton className="w-full h-full absolute inset-0" />
<div className="absolute inset-0 flex items-center justify-center">
<Coffee className="h-16 w-16 text-muted-foreground/50 animate-pulse" />
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
<Coffee className="h-16 w-16 text-muted-foreground/50" />
<Loader2 className="h-8 w-8 text-primary animate-spin" />
</div>
</div>
),
@@ -46,5 +45,5 @@ export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscove
return () => clearTimeout(timer);
}, []);
return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
}

37
src/components/Navbar.tsx
View File

@@ -1,6 +1,7 @@
import { Coffee, PanelLeft, X } from "lucide-react";
import { Button } from "~/components/ui/button";
import { useState } from "react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
import { useState, useEffect } from "react";
interface NavbarProps {
isDiscoveryOpen: boolean;
@@ -9,26 +10,58 @@ interface NavbarProps {
export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) {
const [showAbout, setShowAbout] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
const handleHeaderClick = () => {
const event = new CustomEvent('show-welcome-modal');
window.dispatchEvent(event);
};
useEffect(() => {
// Show tooltip hint on mobile for first-time users
const hasSeenHint = localStorage.getItem('discovery-panel-hint-seen');
const isMobile = window.innerWidth < 640;
if (!hasSeenHint && isMobile) {
const timer = setTimeout(() => {
setShowTooltip(true);
// Auto-hide after 5 seconds
setTimeout(() => {
setShowTooltip(false);
localStorage.setItem('discovery-panel-hint-seen', 'true');
}, 5000);
}, 1000);
return () => clearTimeout(timer);
}
}, []);
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="flex items-center gap-2">
<TooltipProvider>
<Tooltip open={showTooltip} onOpenChange={setShowTooltip}>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={onToggleDiscovery}
onClick={() => {
onToggleDiscovery();
setShowTooltip(false);
localStorage.setItem('discovery-panel-hint-seen', 'true');
}}
className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
>
<PanelLeft className="h-5 w-5" />
<span className="sr-only">Toggle Panel</span>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" className="bg-primary text-primary-foreground font-semibold">
<p>Discover Coffee Shops</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div

61
src/components/ui/tooltip.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client"
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "~/lib/utils"
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
)
}
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }