87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export function SkeletonBlock({ className = '' }: { className?: string }) {
|
|
return <div className={`animate-pulse rounded bg-surface-container-high/60 ${className}`} />;
|
|
}
|
|
|
|
export function OverviewSkeleton() {
|
|
return (
|
|
<div className="flex flex-col space-y-6" aria-label="Loading Founder Portal data" role="status">
|
|
{/* Masthead Skeleton */}
|
|
<div className="rounded-lg bg-surface-container-lowest border border-outline-variant p-6">
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
|
|
<div className="flex items-center gap-5">
|
|
<SkeletonBlock className="w-16 h-16 rounded" />
|
|
<div className="space-y-2">
|
|
<SkeletonBlock className="w-64 h-7" />
|
|
<SkeletonBlock className="w-48 h-4" />
|
|
<SkeletonBlock className="w-80 h-3 mt-1" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<SkeletonBlock className="w-28 h-8 rounded" />
|
|
<SkeletonBlock className="w-24 h-8 rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 4 Metric Cards Skeleton */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="rounded-lg bg-surface-container-lowest border border-outline-variant p-4 h-32 flex flex-col justify-between">
|
|
<div className="flex justify-between">
|
|
<SkeletonBlock className="w-24 h-3" />
|
|
<SkeletonBlock className="w-16 h-3" />
|
|
</div>
|
|
<SkeletonBlock className="w-20 h-8" />
|
|
<div className="flex justify-between">
|
|
<SkeletonBlock className="w-24 h-3" />
|
|
<SkeletonBlock className="w-20 h-3" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Attention Required Skeleton */}
|
|
<div className="rounded-lg bg-surface-container-lowest border border-outline-variant p-5 space-y-4">
|
|
<div className="flex justify-between">
|
|
<SkeletonBlock className="w-40 h-4" />
|
|
<SkeletonBlock className="w-28 h-4" />
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="rounded bg-surface-container border border-outline-variant p-4 h-48 flex flex-col justify-between">
|
|
<SkeletonBlock className="w-32 h-4 mb-3" />
|
|
<SkeletonBlock className="w-full h-20" />
|
|
<SkeletonBlock className="w-24 h-4 self-end" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upcoming Rides Skeleton */}
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between">
|
|
<SkeletonBlock className="w-44 h-5" />
|
|
<SkeletonBlock className="w-28 h-4" />
|
|
</div>
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
|
{[1, 2].map((i) => (
|
|
<div key={i} className="rounded-lg bg-surface-container-lowest border border-outline-variant p-5 h-64 flex flex-col justify-between">
|
|
<SkeletonBlock className="w-48 h-4" />
|
|
<SkeletonBlock className="w-full h-12" />
|
|
<SkeletonBlock className="w-full h-16" />
|
|
<div className="flex justify-between pt-3 border-t border-outline-variant/60">
|
|
<SkeletonBlock className="w-36 h-8" />
|
|
<SkeletonBlock className="w-24 h-8" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|