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: 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 }>) { }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="en" className={`${ptSerif.variable}`} suppressHydrationWarning> <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> <body>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"

34
src/components/Navbar.tsx
View File

@@ -75,7 +75,6 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
<div <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" 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} onClick={handleHeaderClick}
title="About This Map"
> >
<div className="p-2 rounded-lg group-hover:bg-primary/10 transition-colors"> <div className="p-2 rounded-lg group-hover:bg-primary/10 transition-colors">
<Coffee className="h-6 w-6 text-primary" /> <Coffee className="h-6 w-6 text-primary" />
@@ -93,32 +92,41 @@ export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarPro
{/* About Dialog Overlay */} {/* About Dialog Overlay */}
{showAbout && ( {showAbout && (
<div className="absolute inset-0 z-[2000] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"> <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 <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowAbout(false)} 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" /> <X className="w-5 h-5" />
</Button> </Button>
<div className="flex flex-col items-center text-center space-y-4"> <div className="flex flex-col items-center text-center space-y-4">
<div className="p-3 bg-[#8B4513]/20 rounded-full"> <div className="p-3 bg-primary/20 rounded-full">
<Coffee className="w-8 h-8 text-[#8B4513]" /> <Coffee className="w-8 h-8 text-primary" />
</div> </div>
<h2 className="text-2xl font-bold font-serif">Lewisburg Coffee Map</h2> <h2 className="text-2xl font-bold font-serif">Lewisburg Coffee Map</h2>
<p className="text-gray-300 font-serif leading-relaxed"> <p className="text-muted-foreground font-serif leading-relaxed">
Explore the best coffee spots in Lewisburg, PA. Discover the best coffee spots in Lewisburg, PA. Click on any marker to learn more about each location,
Curated for coffee enthusiasts. or use the discovery panel to browse and search all available shops.
</p> </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"> <div className="text-xs text-muted-foreground space-y-2 font-sans w-full text-left">
<p>Map Data &copy; <a href="https://www.openstreetmap.org/copyright" className="underline hover:text-gray-300">OpenStreetMap</a> contributors</p> <p><strong>Features:</strong></p>
<p>Tiles &copy; <a href="https://carto.com/attributions" className="underline hover:text-gray-300">CARTO</a></p> <ul className="list-disc list-inside space-y-1 ml-2">
<p>Built with Next.js, Tailwind, and Leaflet</p> <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> </div>
</div> </div>

40
src/components/WelcomeModal.tsx
View File

@@ -9,7 +9,7 @@ import {
DialogTitle, DialogTitle,
} from "~/components/ui/dialog"; } from "~/components/ui/dialog";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Coffee, MapPin } from "lucide-react"; import { Coffee, MapPin, Search, Navigation } from "lucide-react";
export function WelcomeModal() { export function WelcomeModal() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -20,7 +20,7 @@ export function WelcomeModal() {
setOpen(true); setOpen(true);
} }
const handleShowWelcome = () => setOpen(true); const handleShowWelcome = () => setOpen(prev => !prev);
window.addEventListener("show-welcome-modal", handleShowWelcome); window.addEventListener("show-welcome-modal", handleShowWelcome);
return () => window.removeEventListener("show-welcome-modal", handleShowWelcome); return () => window.removeEventListener("show-welcome-modal", handleShowWelcome);
}, []); }, []);
@@ -30,8 +30,15 @@ export function WelcomeModal() {
localStorage.setItem("hasSeenWelcome", "true"); localStorage.setItem("hasSeenWelcome", "true");
}; };
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (!newOpen) {
localStorage.setItem("hasSeenWelcome", "true");
}
};
return ( 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"> <DialogContent className="sm:max-w-md bg-background/80 backdrop-blur-xl border-border/50">
<DialogHeader> <DialogHeader>
<div className="mx-auto bg-primary/10 p-3 rounded-full mb-4 w-fit"> <div className="mx-auto bg-primary/10 p-3 rounded-full mb-4 w-fit">
@@ -39,25 +46,34 @@ export function WelcomeModal() {
</div> </div>
<DialogTitle className="text-center text-2xl font-serif">Welcome to the Lewisburg&nbsp;Coffee&nbsp;Map</DialogTitle> <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"> <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> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4"> <div className="grid gap-3 py-4">
<div className="flex items-start gap-4 p-4 rounded-lg bg-muted/50 border border-border/50"> <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" /> <MapPin className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-1"> <div className="space-y-1">
<h4 className="text-sm font-medium leading-none">Explore the Map</h4> <h4 className="text-sm font-medium leading-none">Explore the Map</h4>
<p className="text-sm text-muted-foreground"> <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> </p>
</div> </div>
</div> </div>
<div className="flex items-start gap-4 p-4 rounded-lg bg-muted/50 border border-border/50"> <div className="flex items-start gap-4 p-3 rounded-lg bg-muted/50 border border-border/50">
<Coffee className="h-5 w-5 text-primary mt-0.5" /> <Search className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
<div className="space-y-1"> <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"> <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> </p>
</div> </div>
</div> </div>