feat: Introduce map components, navigation, and a shop detail drawer with updated dependencies and global styling.

src/components/Drawer.tsx

@@ -0,0 +1,82 @@
+import { X, MapPin, Coffee } from "lucide-react";
+
+interface CoffeeShop {
+    id: number;
+    name: string;
+    description: string;
+    lat: number;
+    lng: number;
+}
+
+interface DrawerProps {
+    shop: CoffeeShop | null;
+    onClose: () => void;
+}
+
+export default function Drawer({ shop, onClose }: DrawerProps) {
+    return (
+        <div
+            className={`absolute top-0 right-0 h-full w-full sm:w-[400px] bg-black/90 backdrop-blur-xl border-l border-white/10 z-30 transform transition-transform duration-300 ease-in-out shadow-2xl ${shop ? "translate-x-0" : "translate-x-full"
+                }`}
+        >
+            {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" />
+                        <button
+                            onClick={onClose}
+                            className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors"
+                        >
+                            <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>
+
+                        <div className="space-y-6">
+                            <div>
+                                <h3 className="text-lg font-semibold mb-2 text-gray-200">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>
+
+                    {/* Footer Actions */}
+                    <div className="p-6 border-t border-white/10 bg-black/40">
+                        <a
+                            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"
+                        >
+                            Get Directions
+                        </a>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/Map.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { useEffect } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Coffee } from 'lucide-react';
+
+interface CoffeeShop {
+    id: number;
+    name: string;
+    description: string;
+    lat: number;
+    lng: number;
+}
+
+interface MapProps {
+    shops: CoffeeShop[];
+    onShopSelect: (shop: CoffeeShop) => void;
+}
+
+const Map = ({ shops, onShopSelect }: MapProps) => {
+    useEffect(() => {
+        // No longer need default icon fix as we are using custom icons
+    }, []);
+
+    const createCustomIcon = () => {
+        const iconMarkup = renderToStaticMarkup(
+            <div className="relative flex items-center justify-center w-8 h-8 bg-[#8B4513] rounded-full border-2 border-white shadow-lg transform -translate-x-1/2 -translate-y-1/2 cursor-pointer hover:scale-110 transition-transform">
+                <Coffee className="w-5 h-5 text-white" />
+                <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-[#8B4513]"></div>
+            </div>
+        );
+
+        return L.divIcon({
+            html: iconMarkup,
+            className: 'custom-marker', // Add a class for potential extra styling
+            iconSize: [32, 32],
+            iconAnchor: [16, 32], // Anchor at bottom center
+            popupAnchor: [0, -32],
+        });
+    };
+
+    const customIcon = createCustomIcon();
+
+    return (
+        <MapContainer
+            center={[40.9645, -76.8844]}
+            zoom={15}
+            style={{ height: '100%', width: '100%' }}
+            className="z-0"
+        >
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+                url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+            />
+            {shops.map((shop) => (
+                <Marker
+                    key={shop.id}
+                    position={[shop.lat, shop.lng]}
+                    icon={customIcon}
+                    eventHandlers={{
+                        click: () => onShopSelect(shop),
+                    }}
+                />
+            ))}
+        </MapContainer>
+    );
+};
+
+export default Map;

src/components/MapLoader.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Map = dynamic(() => import("./Map"), {
+    ssr: false,
+    loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
+});
+
+export default function MapLoader({ shops, onShopSelect }: { shops: any[], onShopSelect: (shop: any) => void }) {
+    return <Map shops={shops} onShopSelect={onShopSelect} />;
+}

src/components/Navbar.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import { Coffee } from "lucide-react";
+
+export default function Navbar() {
+    return (
+        <nav className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-md border-b border-white/10">
+            <div className="flex items-center gap-3">
+                <div className="flex items-center justify-center w-10 h-10 bg-[#8B4513] rounded-full shadow-lg">
+                    <Coffee className="w-6 h-6 text-white" />
+                </div>
+                <h1 className="text-2xl font-bold text-white font-serif tracking-wide">
+                    Lewisburg Coffee Map
+                </h1>
+            </div>
+            <div className="flex gap-4">
+                {/* Placeholder for future links or actions */}
+            </div>
+        </nav>
+    );
+}