mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 12:31:13 -05:00
Refactor: Enhance Park List View
This commit is contained in:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user