mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 15:11:15 -05:00
3867d30aac
- Add content-m matching loading skeletons for ParkDetail, RideDetail, CompanyDetail, etc., replacing generic spinners to preserve layout during load - Remove redundant Back to Parent Entity buttons in detail pages in favor of breadcrumb navigation - Prepare groundwork for breadcrumbs across detail pages to improve cohesion and navigation
102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
|
|
|
export function ParkDetailSkeleton() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-7xl animate-pulse">
|
|
{/* Breadcrumb */}
|
|
<div className="h-4 bg-muted rounded w-48 mb-4" />
|
|
|
|
{/* Edit Button Area */}
|
|
<div className="flex justify-end mb-6">
|
|
<div className="h-10 bg-muted rounded w-32" />
|
|
</div>
|
|
|
|
{/* Hero Banner */}
|
|
<div className="aspect-[21/9] bg-muted rounded-lg mb-8" />
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 max-w-6xl mx-auto">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Card key={i} className="border-0 bg-gradient-to-br from-muted/50 to-muted/30">
|
|
<CardContent className="p-4 text-center">
|
|
<div className="h-8 bg-muted rounded w-16 mx-auto mb-2" />
|
|
<div className="h-3 bg-muted rounded w-20 mx-auto" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-2 border-b mb-6">
|
|
{['Overview', 'Rides', 'Reviews', 'Photos', 'History'].map((tab) => (
|
|
<div key={tab} className="h-10 bg-muted rounded w-24" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Content Grid */}
|
|
<div className="grid lg:grid-cols-3 gap-6">
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Description Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="h-6 bg-muted rounded w-48" />
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="h-4 bg-muted rounded w-full" />
|
|
<div className="h-4 bg-muted rounded w-full" />
|
|
<div className="h-4 bg-muted rounded w-3/4" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Featured Rides Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="h-6 bg-muted rounded w-40" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="space-y-2">
|
|
<div className="aspect-square bg-muted rounded-lg" />
|
|
<div className="h-4 bg-muted rounded w-full" />
|
|
<div className="h-3 bg-muted rounded w-3/4" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Info Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="h-6 bg-muted rounded w-40" />
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="w-4 h-4 bg-muted rounded" />
|
|
<div className="flex-1">
|
|
<div className="h-4 bg-muted rounded w-24 mb-1" />
|
|
<div className="h-3 bg-muted rounded w-32" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Map Card */}
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<div className="aspect-square bg-muted rounded-lg" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|