pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 15:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Improve Rides tab UI

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 20:04:07 +00:00
parent 10885afa5a
commit ff152970fd
1 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/ParkDetail.tsx
View File

@@ -6,7 +6,9 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent } from 'lucide-react'; import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Camera, Castle, FerrisWheel, Waves, Tent, Plus } from 'lucide-react';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { ReviewsSection } from '@/components/reviews/ReviewsSection'; import { ReviewsSection } from '@/components/reviews/ReviewsSection';
import { RideCard } from '@/components/rides/RideCard'; import { RideCard } from '@/components/rides/RideCard';
import { Park, Ride } from '@/types/database'; import { Park, Ride } from '@/types/database';
@@ -20,6 +22,8 @@ export default function ParkDetail() {
slug: string; slug: string;
}>(); }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { user } = useAuth();
const { isModerator, isAdmin } = useUserRole();
const [park, setPark] = useState<Park | null>(null); const [park, setPark] = useState<Park | null>(null);
const [rides, setRides] = useState<Ride[]>([]); const [rides, setRides] = useState<Ride[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -409,15 +413,39 @@ export default function ParkDetail() {
</TabsContent> </TabsContent>
<TabsContent value="rides" className="mt-6"> <TabsContent value="rides" className="mt-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> {/* Header with Add Ride button */}
{rides.map(ride => ( <div className="flex items-center justify-between mb-6">
<RideCard <h2 className="text-2xl font-bold">Rides at {park.name}</h2>
key={ride.id} {user && (isModerator() || isAdmin()) && (
ride={ride} <Button onClick={() => navigate(`/parks/${park.slug}/rides/new`)}>
showParkName={false} <Plus className="w-4 h-4 mr-2" />
/> Add Ride
))} </Button>
)}
</div> </div>
{/* Conditional rendering */}
{rides.length === 0 ? (
<Card className="border-dashed bg-muted/50">
<CardContent className="p-12 text-center">
<FerrisWheel className="w-16 h-16 mx-auto mb-4 text-muted-foreground/40" />
<h3 className="text-xl font-semibold mb-2">No rides yet</h3>
<p className="text-muted-foreground">
Be the first to add a ride to this park
</p>
</CardContent>
</Card>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{rides.map(ride => (
<RideCard
key={ride.id}
ride={ride}
showParkName={false}
/>
))}
</div>
)}
</TabsContent> </TabsContent>
<TabsContent value="reviews" className="mt-6"> <TabsContent value="reviews" className="mt-6">