mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 08:11:13 -05:00
475 lines
31 KiB
TypeScript
475 lines
31 KiB
TypeScript
import { useState } from 'react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { ParkCard } from '@/components/parks/ParkCard';
|
|
import { RideCard } from '@/components/rides/RideCard';
|
|
import { RecentChangeCard } from './RecentChangeCard';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Clock } from 'lucide-react';
|
|
import { useHomepageTrendingParks, useHomepageTrendingRides } from '@/hooks/homepage/useHomepageTrending';
|
|
import { useHomepageRecentParks, useHomepageRecentRides } from '@/hooks/homepage/useHomepageRecent';
|
|
import { useHomepageRecentChanges } from '@/hooks/homepage/useHomepageRecentChanges';
|
|
import { useHomepageRecentlyOpenedParks, useHomepageRecentlyOpenedRides } from '@/hooks/homepage/useHomepageOpened';
|
|
import { useHomepageHighestRatedParks, useHomepageHighestRatedRides } from '@/hooks/homepage/useHomepageRated';
|
|
import { useHomepageOpeningSoonParks, useHomepageOpeningSoonRides } from '@/hooks/homepage/useHomepageOpeningSoon';
|
|
import { useHomepageClosingSoonParks, useHomepageClosingSoonRides } from '@/hooks/homepage/useHomepageClosing';
|
|
import { useHomepageRecentlyClosedParks, useHomepageRecentlyClosedRides } from '@/hooks/homepage/useHomepageClosed';
|
|
|
|
export function ContentTabs() {
|
|
const [activeTab, setActiveTab] = useState('trending-parks');
|
|
|
|
// Lazy load data - only fetch when tab is active
|
|
const trendingParks = useHomepageTrendingParks(activeTab === 'trending-parks');
|
|
const trendingRides = useHomepageTrendingRides(activeTab === 'trending-rides');
|
|
const recentParks = useHomepageRecentParks(activeTab === 'recent-parks');
|
|
const recentRides = useHomepageRecentRides(activeTab === 'recent-rides');
|
|
const recentChanges = useHomepageRecentChanges(activeTab === 'recent-changes');
|
|
const recentlyOpenedParks = useHomepageRecentlyOpenedParks(activeTab === 'recently-opened');
|
|
const recentlyOpenedRides = useHomepageRecentlyOpenedRides(activeTab === 'recently-opened');
|
|
const highestRatedParks = useHomepageHighestRatedParks(activeTab === 'highest-rated-parks');
|
|
const highestRatedRides = useHomepageHighestRatedRides(activeTab === 'highest-rated-rides');
|
|
const openingSoonParks = useHomepageOpeningSoonParks(activeTab === 'opening-soon');
|
|
const openingSoonRides = useHomepageOpeningSoonRides(activeTab === 'opening-soon');
|
|
const closingSoonParks = useHomepageClosingSoonParks(activeTab === 'closing-soon');
|
|
const closingSoonRides = useHomepageClosingSoonRides(activeTab === 'closing-soon');
|
|
const recentlyClosedParks = useHomepageRecentlyClosedParks(activeTab === 'recently-closed');
|
|
const recentlyClosedRides = useHomepageRecentlyClosedRides(activeTab === 'recently-closed');
|
|
|
|
// Combine parks and rides for mixed tabs
|
|
const recentlyOpened = [
|
|
...(recentlyOpenedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
|
|
...(recentlyOpenedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
|
|
].sort((a, b) => new Date(b.opening_date || 0).getTime() - new Date(a.opening_date || 0).getTime()).slice(0, 24);
|
|
|
|
const openingSoon = [
|
|
...(openingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
|
|
...(openingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
|
|
].sort((a, b) => new Date(a.opening_date || 0).getTime() - new Date(b.opening_date || 0).getTime()).slice(0, 24);
|
|
|
|
const closingSoon = [
|
|
...(closingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
|
|
...(closingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
|
|
].sort((a, b) => new Date(a.closing_date || 0).getTime() - new Date(b.closing_date || 0).getTime()).slice(0, 24);
|
|
|
|
const recentlyClosed = [
|
|
...(recentlyClosedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
|
|
...(recentlyClosedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
|
|
].sort((a, b) => new Date(b.closing_date || 0).getTime() - new Date(a.closing_date || 0).getTime()).slice(0, 24);
|
|
|
|
const isLoadingInitial = activeTab === 'trending-parks' && trendingParks.isLoading;
|
|
|
|
if (isLoadingInitial) {
|
|
return (
|
|
<section className="py-12">
|
|
<div className="container mx-auto px-4">
|
|
<div className="space-y-8">
|
|
<div className="text-center space-y-3">
|
|
<div className="h-8 bg-gradient-to-r from-primary/20 via-secondary/20 to-accent/20 rounded-lg w-64 mx-auto animate-pulse" />
|
|
<div className="h-4 bg-muted/50 rounded w-96 mx-auto animate-pulse" style={{ animationDelay: '150ms' }} />
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
|
|
</div>
|
|
|
|
<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 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="h-72 bg-gradient-to-br from-card via-card to-card/80 rounded-lg border border-border/50 animate-pulse relative overflow-hidden"
|
|
style={{ animationDelay: `${i * 50}ms` }}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-shimmer" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="py-8">
|
|
<div className="container mx-auto px-4">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
<div className="text-center mb-8">
|
|
<TabsList className="flex flex-wrap justify-center gap-2 p-3 bg-muted/30 rounded-lg max-w-5xl mx-auto">
|
|
<TabsTrigger value="trending-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Trending Parks
|
|
</TabsTrigger>
|
|
<TabsTrigger value="trending-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Trending Rides
|
|
</TabsTrigger>
|
|
<TabsTrigger value="recent-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
New Parks
|
|
</TabsTrigger>
|
|
<TabsTrigger value="recent-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
New Rides
|
|
</TabsTrigger>
|
|
<TabsTrigger value="recent-changes" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Recent Changes
|
|
</TabsTrigger>
|
|
<TabsTrigger value="highest-rated-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Top Parks
|
|
</TabsTrigger>
|
|
<TabsTrigger value="highest-rated-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Top Rides
|
|
</TabsTrigger>
|
|
<TabsTrigger value="opening-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Opening Soon
|
|
</TabsTrigger>
|
|
<TabsTrigger value="recently-opened" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Recently Opened
|
|
</TabsTrigger>
|
|
<TabsTrigger value="closing-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Closing Soon
|
|
</TabsTrigger>
|
|
<TabsTrigger value="recently-closed" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
|
|
Recently Closed
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<TabsContent value="trending-parks" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Parks</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed parks in the last 30 days</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{trendingParks.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{trendingParks.data?.map((park) => (
|
|
<ParkCard key={park.id} park={park} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="trending-rides" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Rides</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed rides in the last 30 days</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{trendingRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{trendingRides.data?.map((ride) => (
|
|
<RideCard key={ride.id} ride={ride} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recent-parks" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Parks</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest parks added to our database</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{recentParks.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{recentParks.data?.map((park) => (
|
|
<ParkCard key={park.id} park={park} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recent-rides" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Rides</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest attractions added to our database</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{recentRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{recentRides.data?.map((ride) => (
|
|
<RideCard key={ride.id} ride={ride} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recent-changes" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recent Changes</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest updates across all entities</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{recentChanges.isLoading ? (
|
|
<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 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-64 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : recentChanges.data && recentChanges.data.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 gap-4">
|
|
{recentChanges.data.map((change) => (
|
|
<RecentChangeCard
|
|
key={`${change.type}-${change.id}-${change.changedAt}`}
|
|
entityType={change.type}
|
|
entityId={change.id}
|
|
entityName={change.name}
|
|
entitySlug={change.slug}
|
|
parkSlug={change.parkSlug}
|
|
imageUrl={change.imageUrl}
|
|
changeType={change.changeType}
|
|
changedAt={change.changedAt}
|
|
changedByUsername={change.changedBy?.username}
|
|
changedByAvatar={change.changedBy?.avatarUrl}
|
|
changeReason={change.changeReason}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-16 px-4">
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 rounded-full bg-primary/20 blur-2xl animate-pulse" />
|
|
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-card via-card to-card/80 flex items-center justify-center border-2 border-primary/20 shadow-xl">
|
|
<Clock className="w-10 h-10 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 text-foreground">No Recent Changes</h3>
|
|
<p className="text-muted-foreground text-center max-w-md text-sm">
|
|
There are no recent entity changes to display yet. Check back soon for the latest updates to parks, rides, and companies!
|
|
</p>
|
|
<div className="mt-6 w-32 h-0.5 bg-gradient-to-r from-transparent via-primary/40 to-transparent rounded-full" />
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recently-opened" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Opened</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that opened in the last year</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{recentlyOpenedParks.isLoading || recentlyOpenedRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{recentlyOpened.map((entity) => (
|
|
entity.entityType === 'park' ? (
|
|
<div key={entity.id} className="relative">
|
|
<ParkCard park={entity} />
|
|
{entity.opening_date && (
|
|
<Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
|
|
{new Date(entity.opening_date).getFullYear()}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div key={entity.id} className="relative">
|
|
<RideCard ride={entity} />
|
|
{entity.opening_date && (
|
|
<Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
|
|
{new Date(entity.opening_date).getFullYear()}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)
|
|
))}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="highest-rated-parks" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Highest Rated Parks</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated theme parks based on visitor reviews</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{highestRatedParks.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : highestRatedParks.data && highestRatedParks.data.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{highestRatedParks.data.map((park) => (
|
|
<ParkCard key={park.id} park={park} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No rated parks available yet. Be the first to leave a review!
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="highest-rated-rides" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Highest Rated Rides</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated attractions based on rider reviews</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{highestRatedRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : highestRatedRides.data && highestRatedRides.data.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{highestRatedRides.data.map((ride) => (
|
|
<RideCard key={ride.id} ride={ride} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No rated rides available yet. Be the first to leave a review!
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="opening-soon" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Opening Soon</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides opening in the next 6 months</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{openingSoonParks.isLoading || openingSoonRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : openingSoon.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{openingSoon.map((entity: unknown) => {
|
|
const typedEntity = entity as { id: string; entityType: string; opening_date: string };
|
|
return typedEntity.entityType === 'park' ? (
|
|
<div key={typedEntity.id} className="relative">
|
|
<ParkCard park={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
|
|
{new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Badge>
|
|
</div>
|
|
) : (
|
|
<div key={typedEntity.id} className="relative">
|
|
<RideCard ride={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
|
|
{new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No parks or rides scheduled to open in the next 6 months.
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="closing-soon" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Closing Soon</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Last chance: Parks and rides closing in the next 6 months</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{closingSoonParks.isLoading || closingSoonRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : closingSoon.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{closingSoon.map((entity: unknown) => {
|
|
const typedEntity = entity as { id: string; entityType: string; closing_date: string };
|
|
return typedEntity.entityType === 'park' ? (
|
|
<div key={typedEntity.id} className="relative">
|
|
<ParkCard park={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
|
|
Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Badge>
|
|
</div>
|
|
) : (
|
|
<div key={typedEntity.id} className="relative">
|
|
<RideCard ride={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
|
|
Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No parks or rides scheduled to close in the next 6 months.
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="recently-closed" className="mt-8">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Closed</h2>
|
|
<p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that closed in the last year</p>
|
|
<div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
|
|
</div>
|
|
{recentlyClosedParks.isLoading || recentlyClosedRides.isLoading ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : recentlyClosed.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{recentlyClosed.map((entity: unknown) => {
|
|
const typedEntity = entity as { id: string; entityType: string; closing_date: string };
|
|
return typedEntity.entityType === 'park' ? (
|
|
<div key={typedEntity.id} className="relative">
|
|
<ParkCard park={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
|
|
Closed {new Date(typedEntity.closing_date).getFullYear()}
|
|
</Badge>
|
|
</div>
|
|
) : (
|
|
<div key={typedEntity.id} className="relative">
|
|
<RideCard ride={entity as never} />
|
|
<Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
|
|
Closed {new Date(typedEntity.closing_date).getFullYear()}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
No parks or rides closed in the last year.
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|