284 lines
9.9 KiB
TypeScript
284 lines
9.9 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { useSeoMeta } from '@unhead/react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { RouteDialog } from '@/components/RouteDialog';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { useSkateSpots } from '@/hooks/useSkateSpots';
|
|
import { useFoodSpots } from '@/hooks/useFoodSpots';
|
|
import {
|
|
Utensils,
|
|
MapPin,
|
|
Phone,
|
|
Globe,
|
|
Clock,
|
|
Navigation,
|
|
Coffee,
|
|
Beer,
|
|
ChefHat,
|
|
} from 'lucide-react';
|
|
import type { FoodSpot } from '@/lib/types';
|
|
import { sanitizeUrl, sanitizeTel } from '@/lib/sanitizeUrl';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
const FOOD_TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
restaurant: ChefHat,
|
|
cafe: Coffee,
|
|
fast_food: Utensils,
|
|
bar: Beer,
|
|
pub: Beer,
|
|
food_court: Utensils,
|
|
};
|
|
|
|
const FOOD_TYPE_KEYS: Record<string, string> = {
|
|
restaurant: 'placesUi.food.restaurant',
|
|
cafe: 'placesUi.food.cafe',
|
|
fast_food: 'placesUi.food.fastFood',
|
|
bar: 'placesUi.food.bar',
|
|
pub: 'placesUi.food.pub',
|
|
food_court: 'placesUi.food.foodCourt',
|
|
};
|
|
|
|
function FoodSpotCard({ spot }: { spot: FoodSpot }) {
|
|
const { t } = useTranslation();
|
|
const Icon = FOOD_TYPE_ICONS[spot.type] || Utensils;
|
|
const [showRoute, setShowRoute] = useState(false);
|
|
|
|
// In-app routing only — no external map handoff.
|
|
const handleDirections = () => setShowRoute(true);
|
|
|
|
return (
|
|
<Card className="group hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/30">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
|
|
<Icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<CardTitle className="text-base line-clamp-1 group-hover:text-primary transition-colors">
|
|
{spot.name}
|
|
</CardTitle>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{FOOD_TYPE_KEYS[spot.type] ? t(FOOD_TYPE_KEYS[spot.type]) : spot.type}
|
|
</Badge>
|
|
{spot.cuisine && (
|
|
<span className="text-xs text-muted-foreground truncate">
|
|
{spot.cuisine}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{spot.distance !== undefined && (
|
|
<Badge variant="outline" className="flex-shrink-0">
|
|
{spot.distance < 1
|
|
? `${Math.round(spot.distance * 1000)}m`
|
|
: `${spot.distance.toFixed(1)}km`}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-3">
|
|
{spot.address && (
|
|
<div className="flex items-start gap-2 text-sm text-muted-foreground">
|
|
<MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" />
|
|
<span className="line-clamp-2">{spot.address}</span>
|
|
</div>
|
|
)}
|
|
|
|
{spot.openingHours && (
|
|
<div className="flex items-start gap-2 text-sm text-muted-foreground">
|
|
<Clock className="h-4 w-4 flex-shrink-0 mt-0.5" />
|
|
<span className="line-clamp-1">{spot.openingHours}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 pt-2">
|
|
{spot.phone && sanitizeTel(spot.phone) && (
|
|
<a href={sanitizeTel(spot.phone)!}>
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Phone className="h-3 w-3" />
|
|
{t('placesUi.food.call')}
|
|
</Button>
|
|
</a>
|
|
)}
|
|
{spot.website && sanitizeUrl(spot.website) && (
|
|
<a href={sanitizeUrl(spot.website)!} target="_blank" rel="noopener noreferrer">
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Globe className="h-3 w-3" />
|
|
{t('placesUi.food.website')}
|
|
</Button>
|
|
</a>
|
|
)}
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="gap-2 ml-auto"
|
|
onClick={handleDirections}
|
|
>
|
|
<Navigation className="h-3 w-3" />
|
|
{t('placesUi.food.directions')}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
<RouteDialog
|
|
open={showRoute}
|
|
onOpenChange={setShowRoute}
|
|
destination={{ lat: spot.lat, lng: spot.lng }}
|
|
destinationLabel={spot.name}
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function FoodSpotSkeleton() {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start gap-3">
|
|
<Skeleton className="w-10 h-10 rounded-xl" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-5 w-3/4" />
|
|
<Skeleton className="h-4 w-1/3" />
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-2/3" />
|
|
<div className="flex gap-2 pt-2">
|
|
<Skeleton className="h-8 w-16" />
|
|
<Skeleton className="h-8 w-20" />
|
|
<Skeleton className="h-8 w-24 ml-auto" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function FoodPage() {
|
|
const { t } = useTranslation();
|
|
useSeoMeta({
|
|
title: t('seoUi.foodTitle'),
|
|
description: t('seoUi.foodDesc'),
|
|
});
|
|
|
|
const { data: spots, isLoading: spotsLoading } = useSkateSpots(50);
|
|
const [selectedSpotId, setSelectedSpotId] = useState<string | null>(null);
|
|
|
|
const selectedSpot = useMemo(() => {
|
|
if (!selectedSpotId || !spots) return null;
|
|
return spots.find((s) => s.id === selectedSpotId) || null;
|
|
}, [selectedSpotId, spots]);
|
|
|
|
const {
|
|
data: foodSpots,
|
|
isLoading: foodLoading,
|
|
} = useFoodSpots(selectedSpot?.geohash, 1);
|
|
|
|
return (
|
|
<>
|
|
<div className="container px-4 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold">{t('placesUi.food.title')}</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
{t('placesUi.food.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Spot selector */}
|
|
<Card className="mb-8">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
<div className="flex-1 w-full sm:w-auto">
|
|
<label className="text-sm font-medium mb-2 block">
|
|
{t('placesUi.food.selectSpot')}
|
|
</label>
|
|
<Select
|
|
value={selectedSpotId || ''}
|
|
onValueChange={setSelectedSpotId}
|
|
disabled={spotsLoading}
|
|
>
|
|
<SelectTrigger className="w-full sm:w-[300px]">
|
|
<SelectValue placeholder={t('placesUi.food.chooseSpot')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{spots?.map((spot) => (
|
|
<SelectItem key={spot.id} value={spot.id}>
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="h-4 w-4 text-muted-foreground" />
|
|
<span>{spot.title}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{selectedSpot && (
|
|
<div className="text-sm text-muted-foreground">
|
|
<span className="font-medium">{t('placesUi.food.locationLabel')}</span>{' '}
|
|
{selectedSpot.location || t('placesUi.food.unknown')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Food results */}
|
|
{!selectedSpotId ? (
|
|
<Card className="border-dashed">
|
|
<CardContent className="py-16 text-center">
|
|
<Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
|
<h3 className="text-lg font-medium mb-2">{t('placesUi.food.selectSpotTitle')}</h3>
|
|
<p className="text-muted-foreground max-w-md mx-auto">
|
|
{t('placesUi.food.selectSpotDesc')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : foodLoading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<FoodSpotSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
) : foodSpots && foodSpots.length > 0 ? (
|
|
<>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('placesUi.food.placesFound', { count: foodSpots.length, spot: selectedSpot?.title ?? '' })}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
|
|
{foodSpots.map((spot) => (
|
|
<FoodSpotCard key={spot.id} spot={spot} />
|
|
))}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<Card className="border-dashed">
|
|
<CardContent className="py-16 text-center">
|
|
<Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
|
<h3 className="text-lg font-medium mb-2">{t('placesUi.food.noneFound')}</h3>
|
|
<p className="text-muted-foreground max-w-md mx-auto">
|
|
{t('placesUi.food.noneFoundDesc')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|