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: Implement detailed coffee shop profiles with address, phone, website, and image, displayed in an updated drawer component.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-04 23:18:20 -05:00
parent 75d6fe874b
commit 26c95e2a27
4 changed files with 145 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Drawer.tsx
View File

@@ -1,4 +1,4 @@
import { X, MapPin, Coffee } from "lucide-react";
import { X, MapPin, Coffee, Phone, Globe, ExternalLink } from "lucide-react";
interface CoffeeShop {
id: number;
@@ -6,6 +6,10 @@ interface CoffeeShop {
description: string;
lat: number;
lng: number;
address: string;
phone: string;
website: string;
image: string;
}
interface DrawerProps {
@@ -21,46 +25,54 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
>
{shop && (
<div className="flex flex-col h-full text-white">
{/* Header Image Placeholder */}
<div className="h-64 bg-gradient-to-br from-[#8B4513] to-black relative flex items-center justify-center">
<Coffee className="w-24 h-24 text-white/20" />
{/* Header Image */}
<div className="h-64 relative">
<img
src={shop.image}
alt={shop.name}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
<button
onClick={onClose}
className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors"
className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors backdrop-blur-md"
>
<X className="w-6 h-6 text-white" />
</button>
</div>
{/* Content */}
<div className="p-8 flex-1 overflow-y-auto">
<h2 className="text-4xl font-bold font-serif mb-2 text-[#D2691E]">{shop.name}</h2>
<div className="flex items-center gap-2 text-gray-400 mb-6 font-sans text-sm">
<MapPin className="w-4 h-4" />
<span>{shop.lat.toFixed(4)}, {shop.lng.toFixed(4)}</span>
<div className="p-8 flex-1 overflow-y-auto -mt-12 relative z-10">
<h2 className="text-4xl font-bold font-serif mb-4 text-[#D2691E] leading-tight">{shop.name}</h2>
<div className="space-y-4 mb-8">
<div className="flex items-start gap-3 text-gray-300 font-sans text-sm">
<MapPin className="w-5 h-5 text-[#8B4513] flex-shrink-0 mt-0.5" />
<span>{shop.address}</span>
</div>
{shop.phone && (
<div className="flex items-center gap-3 text-gray-300 font-sans 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>
)}
{shop.website && (
<div className="flex items-center gap-3 text-gray-300 font-sans 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">
Visit Website <ExternalLink className="w-3 h-3" />
</a>
</div>
)}
</div>
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2 text-gray-200">About</h3>
<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">
{shop.description}
</p>
</div>
{/* Placeholder for more details */}
<div className="pt-6 border-t border-white/10">
<div className="grid grid-cols-2 gap-4">
<div className="bg-white/5 p-4 rounded-lg text-center">
<span className="block text-2xl mb-1">☕</span>
<span className="text-xs text-gray-400 uppercase tracking-wider">Coffee</span>
</div>
<div className="bg-white/5 p-4 rounded-lg text-center">
<span className="block text-2xl mb-1">🥐</span>
<span className="text-xs text-gray-400 uppercase tracking-wider">Pastries</span>
</div>
</div>
</div>
</div>
</div>
@@ -70,7 +82,7 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-full py-4 bg-[#8B4513] hover:bg-[#A0522D] text-white font-bold rounded-xl transition-colors"
className="flex items-center justify-center w-full py-4 bg-[#8B4513] hover:bg-[#A0522D] text-white font-bold rounded-xl transition-colors shadow-lg"
>
Get Directions
</a>