mirror of
https://github.com/soconnor0919/lewisburg-coffee.git
synced 2026-02-05 08:06:32 -05:00
feat: Introduce a toggleable discovery drawer with shop search and a new 'locate me' map control.
This commit is contained in:
@@ -1,27 +1,34 @@
|
||||
import { X, MapPin, Globe, Phone, Coffee, ExternalLink } from "lucide-react";
|
||||
import { X, MapPin, Globe, Phone, Coffee, ExternalLink, Search, ChevronRight } from "lucide-react";
|
||||
import { Card } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { ScrollArea } from "~/components/ui/scroll-area";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface DrawerProps {
|
||||
shop: {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
} | null;
|
||||
onClose: () => void;
|
||||
interface CoffeeShop {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
}
|
||||
|
||||
export default function Drawer({ shop, onClose }: DrawerProps) {
|
||||
interface DrawerProps {
|
||||
shop: CoffeeShop | null;
|
||||
shops: CoffeeShop[];
|
||||
onSelect: (shop: CoffeeShop) => void;
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export default function Drawer({ shop, shops, onSelect, onClose, isOpen }: DrawerProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [imageLoading, setImageLoading] = useState(true);
|
||||
|
||||
// Reset loading state when shop changes
|
||||
@@ -31,106 +38,154 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
|
||||
}
|
||||
}, [shop]);
|
||||
|
||||
if (!shop) return null;
|
||||
const filteredShops = shops.filter(s =>
|
||||
s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
s.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 transform transition-transform duration-300 ease-in-out p-4 pointer-events-none ${shop ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
|
||||
>
|
||||
{shop && (
|
||||
<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 bg-muted/20">
|
||||
{imageLoading && (
|
||||
<div
|
||||
className="absolute inset-0 z-10 flex items-center justify-center"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
|
||||
}}
|
||||
>
|
||||
<Skeleton className="h-full w-full absolute inset-0" />
|
||||
<Coffee className="h-12 w-12 text-muted-foreground/50 animate-pulse relative z-20" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src={shop.image}
|
||||
alt={shop.name}
|
||||
className={`w-full h-full object-cover transition-opacity duration-500 ${imageLoading ? 'opacity-0' : 'opacity-100'}`}
|
||||
onLoad={() => setImageLoading(false)}
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="h-full w-full bg-background/40 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0 transition-all duration-300">
|
||||
{shop ? (
|
||||
// Details View
|
||||
// Details View
|
||||
<div className="h-full flex flex-col relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
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"
|
||||
className="absolute top-4 right-4 z-50 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>
|
||||
</div>
|
||||
|
||||
{/* 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-primary leading-tight">{shop.name}</h2>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<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>
|
||||
<ScrollArea className="flex-1 min-h-0">
|
||||
{/* Header Image - Now part of scroll area */}
|
||||
<div className="h-64 relative w-full bg-muted/20">
|
||||
{imageLoading && (
|
||||
<div
|
||||
className="absolute inset-0 z-10 flex items-center justify-center"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
|
||||
}}
|
||||
>
|
||||
<Skeleton className="h-full w-full absolute inset-0" />
|
||||
<Coffee className="h-12 w-12 text-muted-foreground/50 animate-pulse relative z-20" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src={shop.image}
|
||||
alt={shop.name}
|
||||
className={`w-full h-full object-cover transition-opacity duration-500 ${imageLoading ? 'opacity-0' : 'opacity-100'}`}
|
||||
onLoad={() => setImageLoading(false)}
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{shop.phone && (
|
||||
<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-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-border/50 mb-6" />
|
||||
{/* Content - Overlaps image slightly or just follows */}
|
||||
<div className="p-8 -mt-12 relative z-10">
|
||||
<h2 className="text-3xl font-bold font-serif mb-4 text-primary leading-tight drop-shadow-md">{shop.name}</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<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 className="space-y-4 mb-8">
|
||||
<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-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-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>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
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}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<Separator className="bg-border/50 mb-6" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
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"
|
||||
>
|
||||
Get Directions
|
||||
</a>
|
||||
</Button>
|
||||
<a
|
||||
href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Get Directions
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
) : (
|
||||
// List View
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="p-4 border-b border-border/50 bg-background/40 backdrop-blur-md">
|
||||
<h2 className="text-xl font-bold font-serif mb-4 text-primary">Discover Coffee</h2>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search shops..."
|
||||
className="pl-9 bg-background/50 border-border/50 focus:bg-background transition-colors"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
)}
|
||||
<ScrollArea className="flex-1 min-h-0">
|
||||
<div className="p-4 space-y-3">
|
||||
{filteredShops.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
onClick={() => onSelect(s)}
|
||||
className="group flex items-center gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer border border-transparent hover:border-border/50"
|
||||
>
|
||||
<div className="h-16 w-16 rounded-md overflow-hidden flex-shrink-0 bg-muted relative">
|
||||
<img src={s.image} alt={s.name} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold font-serif text-foreground truncate group-hover:text-primary transition-colors">{s.name}</h3>
|
||||
<p className="text-sm text-muted-foreground truncate">{s.address}</p>
|
||||
</div>
|
||||
<ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
))}
|
||||
{filteredShops.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Coffee className="h-12 w-12 mx-auto mb-3 opacity-20" />
|
||||
<p>No shops found matching "{searchQuery}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
35
src/components/LocateControl.tsx
Normal file
35
src/components/LocateControl.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { Locate } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useMap } from "react-leaflet";
|
||||
import { useState } from "react";
|
||||
|
||||
export function LocateControl() {
|
||||
const map = useMap();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleLocate = () => {
|
||||
setLoading(true);
|
||||
map.locate().on("locationfound", function (e) {
|
||||
map.flyTo(e.latlng, 16);
|
||||
setLoading(false);
|
||||
}).on("locationerror", function () {
|
||||
setLoading(false);
|
||||
alert("Could not access your location");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleLocate}
|
||||
disabled={loading}
|
||||
className="bg-background/60 dark:bg-background/60 backdrop-blur-2xl border-border/50 dark:border-border/50 h-10 w-10 rounded-lg shadow-2xl text-foreground"
|
||||
>
|
||||
<Locate className={`h-5 w-5 ${loading ? 'animate-pulse' : ''}`} />
|
||||
<span className="sr-only">Locate me</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { useState, useEffect } from 'react';
|
||||
import { useTheme } from "next-themes";
|
||||
import Navbar from "./Navbar";
|
||||
import { MapStyleControl } from "./MapStyleControl";
|
||||
import { LocateControl } from './LocateControl';
|
||||
import { ZoomControls } from "./ZoomControls";
|
||||
|
||||
interface CoffeeShop {
|
||||
@@ -25,6 +26,8 @@ interface MapProps {
|
||||
shops: CoffeeShop[];
|
||||
onShopSelect: (shop: CoffeeShop) => void;
|
||||
selectedShop: CoffeeShop | null;
|
||||
isDiscoveryOpen: boolean;
|
||||
onToggleDiscovery: () => void;
|
||||
}
|
||||
|
||||
const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) => {
|
||||
@@ -42,7 +45,7 @@ const MapController = ({ selectedShop }: { selectedShop: CoffeeShop | null }) =>
|
||||
return null;
|
||||
};
|
||||
|
||||
const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
|
||||
const Map = ({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapProps) => {
|
||||
useEffect(() => {
|
||||
// Fix for Leaflet default icon not found
|
||||
// @ts-expect-error Fix for Leaflet default icon not found
|
||||
@@ -122,9 +125,10 @@ const Map = ({ shops, onShopSelect, selectedShop }: MapProps) => {
|
||||
zoomControl={false}
|
||||
attributionControl={false}
|
||||
>
|
||||
<Navbar />
|
||||
<Navbar isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />
|
||||
<MapController selectedShop={selectedShop} />
|
||||
<div className="absolute bottom-8 right-4 z-[1000] flex flex-col gap-2 items-end">
|
||||
<LocateControl />
|
||||
<ZoomControls />
|
||||
<MapStyleControl currentStyle={mapStyle} onStyleChange={handleStyleChange} />
|
||||
</div>
|
||||
|
||||
@@ -23,8 +23,10 @@ interface MapLoaderProps {
|
||||
shops: CoffeeShop[];
|
||||
onShopSelect: (shop: CoffeeShop) => void;
|
||||
selectedShop: CoffeeShop | null;
|
||||
isDiscoveryOpen: boolean;
|
||||
onToggleDiscovery: () => void;
|
||||
}
|
||||
|
||||
export default function MapLoader({ shops, onShopSelect, selectedShop }: MapLoaderProps) {
|
||||
return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} />;
|
||||
export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
|
||||
return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,50 @@
|
||||
import { Coffee, X } from "lucide-react";
|
||||
import { Coffee, PanelLeft, X } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Navbar() {
|
||||
interface NavbarProps {
|
||||
isDiscoveryOpen: boolean;
|
||||
onToggleDiscovery: () => void;
|
||||
}
|
||||
|
||||
export default function Navbar({ isDiscoveryOpen, onToggleDiscovery }: NavbarProps) {
|
||||
const [showAbout, setShowAbout] = useState(false);
|
||||
|
||||
const handleHeaderClick = () => {
|
||||
const event = new CustomEvent('show-welcome-modal');
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="absolute top-0 left-0 right-0 z-[1000] p-4 pointer-events-none">
|
||||
<div className="flex flex-row items-center justify-between px-5 py-3 bg-background/60 backdrop-blur-2xl border border-border/50 rounded-lg shadow-2xl pointer-events-auto w-full">
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => window.dispatchEvent(new Event("show-welcome-modal"))}
|
||||
>
|
||||
<Coffee className="w-6 h-6 text-primary" />
|
||||
<h1 className="text-xl font-bold text-foreground font-serif tracking-wide leading-none pt-0.5">
|
||||
Lewisburg Coffee Map
|
||||
</h1>
|
||||
<div className="absolute top-4 left-4 right-4 z-[1000] flex justify-center pointer-events-none">
|
||||
<div className="bg-background/60 backdrop-blur-2xl border border-border/50 shadow-2xl rounded-xl p-2 flex items-center justify-between w-full pointer-events-auto">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggleDiscovery}
|
||||
className={`h-10 w-10 rounded-lg hover:bg-background/40 transition-colors ${isDiscoveryOpen ? 'bg-background/40 text-primary' : 'text-muted-foreground'}`}
|
||||
>
|
||||
<PanelLeft className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle Panel</span>
|
||||
</Button>
|
||||
</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"
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<div className="bg-primary/10 p-2 rounded-lg group-hover:bg-primary/20 transition-colors">
|
||||
<Coffee className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold font-serif text-foreground leading-none">Lewisburg Coffee Map</h1>
|
||||
<p className="text-xs text-muted-foreground font-serif mt-0.5">Find your perfect brew</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-10" /> {/* Spacer to balance the toggle button */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
21
src/components/ui/input.tsx
Normal file
21
src/components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
Reference in New Issue
Block a user