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

feat: Enhance welcome and about modals with expanded content and improved styling, and integrate Umami analytics.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 02:41:21 -05:00
parent 132283e216
commit 52a0d6f8fa
3 changed files with 56 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/layout.tsx
View File

@@ -30,6 +30,13 @@ export default function RootLayout({
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${ptSerif.variable}`} suppressHydrationWarning>
<head>
<script
defer
src="https://umami-iccw808w4wk088o0w4o8c8kg.coolify.soconnor.dev/script.js"
data-website-id="415c64e5-98c5-4975-bf49-2c900fe6b1b5"
/>
</head>
<body>
<ThemeProvider
attribute="class"

34
src/components/Navbar.tsx
View File

@@ -75,7 +75,6 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
<div
className="flex items-center gap-3 px-2 cursor-pointer group absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
onClick={handleHeaderClick}
title="About This Map"
>
<div className="p-2 rounded-lg group-hover:bg-primary/10 transition-colors">
<Coffee className="h-6 w-6 text-primary" />
@@ -93,32 +92,41 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
{/* About Dialog Overlay */}
{showAbout && (
<div className="absolute inset-0 z-[2000] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
<div className="w-full max-w-md bg-black/60 backdrop-blur-2xl border border-white/10 text-white p-6 relative shadow-2xl rounded-xl">
<div className="w-full max-w-md bg-background/80 backdrop-blur-2xl border border-border/50 text-foreground p-6 relative shadow-2xl rounded-xl">
<Button
variant="ghost"
size="icon"
onClick={() => setShowAbout(false)}
className="absolute top-4 right-4 text-gray-400 hover:text-white"
className="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
>
<X className="w-5 h-5" />
</Button>
<div className="flex flex-col items-center text-center space-y-4">
<div className="p-3 bg-[#8B4513]/20 rounded-full">
<Coffee className="w-8 h-8 text-[#8B4513]" />
<div className="p-3 bg-primary/20 rounded-full">
<Coffee className="w-8 h-8 text-primary" />
</div>
<h2 className="text-2xl font-bold font-serif">Lewisburg Coffee Map</h2>
<p className="text-gray-300 font-serif leading-relaxed">
Explore the best coffee spots in Lewisburg, PA.
Curated for coffee enthusiasts.
<p className="text-muted-foreground font-serif leading-relaxed">
Discover the best coffee spots in Lewisburg, PA. Click on any marker to learn more about each location,
or use the discovery panel to browse and search all available shops.
</p>
<div className="w-full h-px bg-white/10 my-4" />
<div className="w-full h-px bg-border/50 my-4" />
<div className="text-xs text-gray-500 space-y-2 font-sans">
<p>Map Data &copy; <a href="https://www.openstreetmap.org/copyright" className="underline hover:text-gray-300">OpenStreetMap</a> contributors</p>
<p>Tiles &copy; <a href="https://carto.com/attributions" className="underline hover:text-gray-300">CARTO</a></p>
<p>Built with Next.js, Tailwind, and Leaflet</p>
<div className="text-xs text-muted-foreground space-y-2 font-sans w-full text-left">
<p><strong>Features:</strong></p>
<ul className="list-disc list-inside space-y-1 ml-2">
<li>Interactive map with coffee shop locations</li>
<li>Search and filter coffee shops</li>
<li>Detailed information for each location</li>
<li>Get directions to any shop</li>
<li>Light/Dark theme support</li>
</ul>
<div className="pt-4 border-t border-border/50 mt-4">
<p>Map Data © <a href="https://www.openstreetmap.org/copyright" className="underline hover:text-foreground transition-colors">OpenStreetMap</a> contributors</p>
<p>Tiles © <a href="https://carto.com/attributions" className="underline hover:text-foreground transition-colors">CARTO</a></p>
</div>
</div>
</div>
</div>

40
src/components/WelcomeModal.tsx
View File

@@ -9,7 +9,7 @@ import {
DialogTitle,
} from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
import { Coffee, MapPin } from "lucide-react";
import { Coffee, MapPin, Search, Navigation } from "lucide-react";
export function WelcomeModal() {
const [open, setOpen] = useState(false);
@@ -20,7 +20,7 @@ export function WelcomeModal() {
setOpen(true);
}
const handleShowWelcome = () => setOpen(true);
const handleShowWelcome = () => setOpen(prev => !prev);
window.addEventListener("show-welcome-modal", handleShowWelcome);
return () => window.removeEventListener("show-welcome-modal", handleShowWelcome);
}, []);
@@ -30,8 +30,15 @@ export function WelcomeModal() {
localStorage.setItem("hasSeenWelcome", "true");
};
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (!newOpen) {
localStorage.setItem("hasSeenWelcome", "true");
}
};
return (
<Dialog open={open} onOpenChange={handleClose}>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="sm:max-w-md bg-background/80 backdrop-blur-xl border-border/50">
<DialogHeader>
<div className="mx-auto bg-primary/10 p-3 rounded-full mb-4 w-fit">
@@ -39,25 +46,34 @@ export function WelcomeModal() {
</div>
<DialogTitle className="text-center text-2xl font-serif">Welcome to the Lewisburg&nbsp;Coffee&nbsp;Map</DialogTitle>
<DialogDescription className="text-center text-muted-foreground pt-2">
Discover the best coffee spots in Lewisburg, PA.
Discover the best coffee spots in Lewisburg, PA. Click on markers, search shops, and find your perfect brew.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="flex items-start gap-4 p-4 rounded-lg bg-muted/50 border border-border/50">
<MapPin className="h-5 w-5 text-primary mt-0.5" />
<div className="grid gap-3 py-4">
<div className="flex items-start gap-4 p-3 rounded-lg bg-muted/50 border border-border/50">
<MapPin className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">Explore the Map</h4>
<p className="text-sm text-muted-foreground">
Navigate through the town to find your next caffeine fix.
Click any marker to see details, photos, and get directions.
</p>
</div>
</div>
<div className="flex items-start gap-4 p-4 rounded-lg bg-muted/50 border border-border/50">
<Coffee className="h-5 w-5 text-primary mt-0.5" />
<div className="flex items-start gap-4 p-3 rounded-lg bg-muted/50 border border-border/50">
<Search className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">View Details</h4>
<h4 className="text-sm font-medium leading-none">Search & Filter</h4>
<p className="text-sm text-muted-foreground">
Click on any marker to see photos, hours, and get directions.
Use the discovery panel to browse and search all coffee shops.
</p>
</div>
</div>
<div className="flex items-start gap-4 p-3 rounded-lg bg-muted/50 border border-border/50">
<Navigation className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-1">
<h4 className="text-sm font-medium leading-none">Find Your Location</h4>
<p className="text-sm text-muted-foreground">
Use the locate button to center the map on your current position.
</p>
</div>
</div>