mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 10:51:13 -05:00
Add park listing page
This commit is contained in:
gpt-engineer-app[bot]
231
src/components/parks/ParkFilters.tsx
Normal file
231
src/components/parks/ParkFilters.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { RotateCcw } from 'lucide-react';
|
||||
import { Park } from '@/types/database';
|
||||
import { FilterState } from '@/pages/Parks';
|
||||
|
||||
interface ParkFiltersProps {
|
||||
filters: FilterState;
|
||||
onFiltersChange: (filters: FilterState) => void;
|
||||
parks: Park[];
|
||||
}
|
||||
|
||||
export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProps) {
|
||||
const countries = useMemo(() => {
|
||||
const countrySet = new Set<string>();
|
||||
parks.forEach(park => {
|
||||
if (park.location?.country) {
|
||||
countrySet.add(park.location.country);
|
||||
}
|
||||
});
|
||||
return Array.from(countrySet).sort();
|
||||
}, [parks]);
|
||||
|
||||
const parkTypes = [
|
||||
{ value: 'all', label: 'All Types' },
|
||||
{ value: 'theme_park', label: 'Theme Parks' },
|
||||
{ value: 'amusement_park', label: 'Amusement Parks' },
|
||||
{ value: 'water_park', label: 'Water Parks' },
|
||||
{ value: 'family_entertainment', label: 'Family Entertainment' }
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'All Status' },
|
||||
{ value: 'operating', label: 'Operating' },
|
||||
{ value: 'seasonal', label: 'Seasonal' },
|
||||
{ value: 'under_construction', label: 'Under Construction' },
|
||||
{ value: 'closed', label: 'Closed' }
|
||||
];
|
||||
|
||||
const maxRides = useMemo(() => {
|
||||
return Math.max(...parks.map(p => p.ride_count || 0), 100);
|
||||
}, [parks]);
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const minYear = 1900;
|
||||
|
||||
const resetFilters = () => {
|
||||
onFiltersChange({
|
||||
search: '',
|
||||
parkType: 'all',
|
||||
status: 'all',
|
||||
country: 'all',
|
||||
minRating: 0,
|
||||
maxRating: 5,
|
||||
minRides: 0,
|
||||
maxRides: maxRides,
|
||||
openingYearStart: null,
|
||||
openingYearEnd: null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Filter Parks</h3>
|
||||
<Button variant="ghost" size="sm" onClick={resetFilters}>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{/* Park Type */}
|
||||
<div className="space-y-2">
|
||||
<Label>Park Type</Label>
|
||||
<Select
|
||||
value={filters.parkType}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parkTypes.map(type => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="space-y-2">
|
||||
<Label>Status</Label>
|
||||
<Select
|
||||
value={filters.status}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{statusOptions.map(status => (
|
||||
<SelectItem key={status.value} value={status.value}>
|
||||
{status.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Country */}
|
||||
<div className="space-y-2">
|
||||
<Label>Country</Label>
|
||||
<Select
|
||||
value={filters.country}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Countries</SelectItem>
|
||||
{countries.map(country => (
|
||||
<SelectItem key={country} value={country}>
|
||||
{country}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Opening Year Range */}
|
||||
<div className="space-y-2">
|
||||
<Label>Opening Year</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="From"
|
||||
min={minYear}
|
||||
max={currentYear}
|
||||
value={filters.openingYearStart || ''}
|
||||
onChange={(e) => onFiltersChange({
|
||||
...filters,
|
||||
openingYearStart: e.target.value ? parseInt(e.target.value) : null
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="To"
|
||||
min={minYear}
|
||||
max={currentYear}
|
||||
value={filters.openingYearEnd || ''}
|
||||
onChange={(e) => onFiltersChange({
|
||||
...filters,
|
||||
openingYearEnd: e.target.value ? parseInt(e.target.value) : null
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Rating Range */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Rating Range</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{filters.minRating.toFixed(1)} - {filters.maxRating.toFixed(1)} stars
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2">
|
||||
<Slider
|
||||
value={[filters.minRating, filters.maxRating]}
|
||||
onValueChange={([min, max]) =>
|
||||
onFiltersChange({ ...filters, minRating: min, maxRating: max })
|
||||
}
|
||||
min={0}
|
||||
max={5}
|
||||
step={0.1}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-1">
|
||||
<span>0 stars</span>
|
||||
<span>5 stars</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ride Count Range */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Number of Rides</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{filters.minRides} - {filters.maxRides} rides
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2">
|
||||
<Slider
|
||||
value={[filters.minRides, filters.maxRides]}
|
||||
onValueChange={([min, max]) =>
|
||||
onFiltersChange({ ...filters, minRides: min, maxRides: max })
|
||||
}
|
||||
min={0}
|
||||
max={maxRides}
|
||||
step={1}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-1">
|
||||
<span>0 rides</span>
|
||||
<span>{maxRides} rides</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/components/parks/ParkGridView.tsx
Normal file
21
src/components/parks/ParkGridView.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { ParkCard } from './ParkCard';
|
||||
import { Park } from '@/types/database';
|
||||
|
||||
interface ParkGridViewProps {
|
||||
parks: Park[];
|
||||
onParkClick: (park: Park) => void;
|
||||
}
|
||||
|
||||
export function ParkGridView({ parks, onParkClick }: ParkGridViewProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
||||
{parks.map((park) => (
|
||||
<ParkCard
|
||||
key={park.id}
|
||||
park={park}
|
||||
onClick={() => onParkClick(park)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
160
src/components/parks/ParkListView.tsx
Normal file
160
src/components/parks/ParkListView.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Park } from '@/types/database';
|
||||
|
||||
interface ParkListViewProps {
|
||||
parks: Park[];
|
||||
onParkClick: (park: Park) => void;
|
||||
}
|
||||
|
||||
export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
|
||||
case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
|
||||
case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
||||
default: return 'bg-red-500/20 text-red-400 border-red-500/30';
|
||||
}
|
||||
};
|
||||
|
||||
const getParkTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'theme_park': return '🏰';
|
||||
case 'amusement_park': return '🎢';
|
||||
case 'water_park': return '🏊';
|
||||
case 'family_entertainment': return '🎪';
|
||||
default: return '🎡';
|
||||
}
|
||||
};
|
||||
|
||||
const formatParkType = (type: string) => {
|
||||
return type.split('_').map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
).join(' ');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{parks.map((park) => (
|
||||
<Card
|
||||
key={park.id}
|
||||
className="group overflow-hidden border-border/50 bg-gradient-to-r from-card via-card to-card/80 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 cursor-pointer"
|
||||
onClick={() => onParkClick(park)}
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<div className="flex">
|
||||
{/* Image */}
|
||||
<div className="w-32 h-32 md:w-48 md:h-32 flex-shrink-0 relative overflow-hidden">
|
||||
{park.card_image_url ? (
|
||||
<img
|
||||
src={park.card_image_url}
|
||||
alt={park.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
|
||||
<span className="text-3xl opacity-50">
|
||||
{getParkTypeIcon(park.park_type)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status Badge */}
|
||||
<Badge
|
||||
className={`absolute top-2 left-2 text-xs ${getStatusColor(park.status)} border`}
|
||||
>
|
||||
{park.status.replace('_', ' ').toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
|
||||
<div className="space-y-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
|
||||
{park.name}
|
||||
</h3>
|
||||
<span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
|
||||
</div>
|
||||
|
||||
{park.location && (
|
||||
<div className="flex items-center text-sm text-muted-foreground">
|
||||
<MapPin className="w-3 h-3 mr-1" />
|
||||
{park.location.city && `${park.location.city}, `}
|
||||
{park.location.state_province && `${park.location.state_province}, `}
|
||||
{park.location.country}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
{park.average_rating > 0 && (
|
||||
<div className="flex items-center gap-1 ml-4">
|
||||
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="font-medium">{park.average_rating.toFixed(1)}</span>
|
||||
<span className="text-sm text-muted-foreground">({park.review_count})</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{park.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{park.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{formatParkType(park.park_type)}
|
||||
</Badge>
|
||||
{park.opening_date && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<Calendar className="w-3 h-3 mr-1" />
|
||||
Opened {new Date(park.opening_date).getFullYear()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats and Actions */}
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-primary font-medium">{park.ride_count || 0}</span>
|
||||
<span className="text-muted-foreground">rides</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-accent font-medium">{park.coaster_count || 0}</span>
|
||||
<span className="text-muted-foreground">🎢</span>
|
||||
</div>
|
||||
{park.review_count > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{park.review_count} reviews</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 mr-1" />
|
||||
View Details
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/components/parks/ParkSearch.tsx
Normal file
38
src/components/parks/ParkSearch.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useState } from 'react';
|
||||
import { Search, X } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface ParkSearchProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function ParkSearch({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Search parks, locations, descriptions..."
|
||||
}: ParkSearchProps) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="pl-10 pr-10 bg-muted/50 border-border/50 focus:border-primary/50 transition-colors"
|
||||
/>
|
||||
{value && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onChange('')}
|
||||
className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/parks/ParkSortOptions.tsx
Normal file
61
src/components/parks/ParkSortOptions.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SortState } from '@/pages/Parks';
|
||||
|
||||
interface ParkSortOptionsProps {
|
||||
sort: SortState;
|
||||
onSortChange: (sort: SortState) => void;
|
||||
}
|
||||
|
||||
export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
|
||||
const sortOptions = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'rating', label: 'Rating' },
|
||||
{ value: 'rides', label: 'Ride Count' },
|
||||
{ value: 'coasters', label: 'Coaster Count' },
|
||||
{ value: 'reviews', label: 'Review Count' },
|
||||
{ value: 'opening', label: 'Opening Date' },
|
||||
];
|
||||
|
||||
const toggleDirection = () => {
|
||||
onSortChange({
|
||||
...sort,
|
||||
direction: sort.direction === 'asc' ? 'desc' : 'asc'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={sort.field}
|
||||
onValueChange={(field) => onSortChange({ ...sort, field })}
|
||||
>
|
||||
<SelectTrigger className="w-48 bg-muted/50 border-border/50">
|
||||
<ArrowUpDown className="w-4 h-4 mr-2" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sortOptions.map(option => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
Sort by {option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={toggleDirection}
|
||||
className="shrink-0 bg-muted/50 border-border/50"
|
||||
>
|
||||
{sort.direction === 'asc' ? (
|
||||
<SortAsc className="w-4 h-4" />
|
||||
) : (
|
||||
<SortDesc className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user