Refactor: Enhance Park List View

This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 16:08:32 +00:00
parent ba1c0625b0
commit 48bf6c7823
10 changed files with 659 additions and 72 deletions

View File

@@ -7,10 +7,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
import { RideCard } from '@/components/rides/RideCard';
import { RideListView } from '@/components/rides/RideListView';
import { RideForm } from '@/components/admin/RideForm';
import { RideFilters, RideFilterState, defaultRideFilters } from '@/components/rides/RideFilters';
import { Ride } from '@/types/database';
@@ -32,6 +34,7 @@ export default function Rides() {
const [sortBy, setSortBy] = useState('name');
const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
const [showFilters, setShowFilters] = useState(false);
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
const saved = localStorage.getItem('rides-sidebar-collapsed');
@@ -221,6 +224,13 @@ export default function Rides() {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
<TabsList>
<TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
<TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
@@ -267,11 +277,15 @@ export default function Rides() {
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredRides.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} />
))}
</div>
viewMode === 'grid' ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} />
))}
</div>
) : (
<RideListView rides={filteredRides} onRideClick={(ride) => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)} />
)
) : (
<div className="text-center py-12">
<FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />