pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 12:31:26 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
eb68cf40c6c93e317a787fbd6a218d505ef0fe54
thrilltrack-explorer/src-old/components/homepage/ContentTabs.tsx

475 lines
31 KiB
TypeScript
Raw Blame History

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>
);
}
Reference in New Issue View Git Blame Copy Permalink