mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 06:31:14 -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
107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
export function RideDetailSkeleton() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-7xl animate-pulse">
|
|
{/* Breadcrumb */}
|
|
<div className="h-4 bg-muted rounded w-64 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 Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-12">
|
|
{[1, 2, 3, 4, 5, 6].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="w-6 h-6 bg-muted rounded mx-auto mb-2" />
|
|
<div className="h-8 bg-muted rounded w-16 mx-auto mb-1" />
|
|
<div className="h-3 bg-muted rounded w-12 mx-auto" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-2 border-b mb-6">
|
|
{['Overview', '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>
|
|
<CardContent className="p-6 space-y-3">
|
|
<div className="h-6 bg-muted rounded w-48 mb-4" />
|
|
<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-5/6" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Technical Specs */}
|
|
<Card>
|
|
<CardContent className="p-6 space-y-4">
|
|
<div className="h-6 bg-muted rounded w-56 mb-4" />
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
|
<div key={i} className="space-y-2">
|
|
<div className="h-3 bg-muted rounded w-24" />
|
|
<div className="h-5 bg-muted rounded w-32" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Ride Info Card */}
|
|
<Card>
|
|
<CardContent className="p-6 space-y-4">
|
|
<div className="h-6 bg-muted rounded w-40 mb-4" />
|
|
{[1, 2, 3, 4, 5].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-20 mb-1" />
|
|
<div className="h-3 bg-muted rounded w-28" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Similar Rides */}
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="h-6 bg-muted rounded w-32 mb-4" />
|
|
<div className="space-y-3">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex gap-3">
|
|
<div className="w-16 h-16 bg-muted rounded" />
|
|
<div className="flex-1 space-y-2">
|
|
<div className="h-4 bg-muted rounded w-full" />
|
|
<div className="h-3 bg-muted rounded w-3/4" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|