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 dynamic theming, map style controls, and core UI components for an interactive map experience.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 01:10:14 -05:00
parent 9f55d8087b
commit 37e522e1e3
15 changed files with 693 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Drawer.tsx
View File

@@ -28,24 +28,26 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
}`}
>
{shop && (
<Card className="h-full w-full bg-black/60 backdrop-blur-2xl border-white/10 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0">
<Card className="h-full w-full bg-background/60 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0">
{/* Header Image */}
<div className="h-56 relative flex-shrink-0">
<img
src={shop.image}
alt={shop.name}
className="w-full h-full object-cover"
/>
{/* Top Fade/Shadow */}
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
{/* Bottom Fade */}
<div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
<div className="absolute inset-0 z-0">
<img
src={shop.image}
alt={shop.name}
className="w-full h-full object-cover"
style={{
maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
}}
/>
</div>
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white rounded-full h-8 w-8 backdrop-blur-md border border-white/10"
className="absolute top-4 right-4 bg-background/20 hover:bg-background/40 text-foreground rounded-full h-8 w-8 backdrop-blur-md border border-border/50"
>
<X className="w-4 h-4" />
</Button>
@@ -54,35 +56,35 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
{/* Content */}
<ScrollArea className="flex-1 -mt-12 relative z-10 min-h-0">
<div className="p-8">
<h2 className="text-3xl font-bold font-serif mb-4 text-[#D2691E] leading-tight">{shop.name}</h2>
<h2 className="text-3xl font-bold font-serif mb-4 text-primary leading-tight">{shop.name}</h2>
<div className="space-y-4 mb-8">
<div className="flex items-start gap-3 text-gray-300 font-serif text-sm">
<MapPin className="w-5 h-5 text-[#8B4513] flex-shrink-0 mt-0.5" />
<div className="flex items-start gap-3 text-muted-foreground font-serif text-sm">
<MapPin className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
<span>{shop.address}</span>
</div>
{shop.phone && (
<div className="flex items-center gap-3 text-gray-300 font-serif text-sm">
<Phone className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
<a href={`tel:${shop.phone}`} className="hover:text-white transition-colors">{shop.phone}</a>
<div className="flex items-center gap-3 text-muted-foreground font-serif text-sm">
<Phone className="w-5 h-5 text-primary flex-shrink-0" />
<a href={`tel:${shop.phone}`} className="hover:text-foreground transition-colors">{shop.phone}</a>
</div>
)}
{shop.website && (
<div className="flex items-center gap-3 text-gray-300 font-serif text-sm">
<Globe className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
<a href={shop.website} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors flex items-center gap-1">
<div className="flex items-center gap-3 text-muted-foreground font-serif text-sm">
<Globe className="w-5 h-5 text-primary flex-shrink-0" />
<a href={shop.website} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors flex items-center gap-1">
Visit Website <ExternalLink className="w-3 h-3" />
</a>
</div>
)}
</div>
<Separator className="bg-white/10 mb-6" />
<Separator className="bg-border/50 mb-6" />
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2 text-gray-200 font-serif">About</h3>
<p className="text-gray-300 leading-relaxed font-serif text-lg">
<h3 className="text-lg font-semibold mb-2 text-foreground font-serif">About</h3>
<p className="text-muted-foreground leading-relaxed font-serif text-lg">
{shop.description}
</p>
</div>
@@ -90,7 +92,7 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
<Button
asChild
size="sm"
className="w-auto px-6 bg-[#8B4513]/20 hover:bg-[#8B4513]/40 text-white font-semibold rounded-lg shadow-lg transition-all hover:scale-[1.02] border border-[#8B4513]/50 backdrop-blur-md"
className="w-auto px-6 bg-primary/20 hover:bg-primary/40 text-foreground font-semibold rounded-lg shadow-lg transition-all hover:scale-[1.02] border border-primary/50 backdrop-blur-md"
>
<a
href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}