fb3e5ceb5b
- types: DashboardStats, UploadItem, AuditLogItem, StatCardProps, Report - useAdminDashboardView: fetchData, handleAction, triggerProtocol - Header, StatCard, TrafficCard, ProtocolsCard, NodeHealthCard, Tabs - AdminDashboardSkeleton for Loading state - max-w-layout-content, text-xs, gap-0.5 (no arbitrary values) - Stories: Default, Loading (Skeleton). Decorator min-h-layout-page - Re-export from AdminDashboardView.tsx Co-authored-by: Cursor <cursoragent@cursor.com>
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
export function AdminDashboardSkeleton() {
|
|
return (
|
|
<div className="space-y-8 pb-24 animate-fadeIn container mx-auto px-4 py-8 max-w-layout-content">
|
|
<div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-12 w-80" />
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-4 w-24" />
|
|
<Skeleton className="h-4 w-28" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Skeleton className="h-10 w-32" />
|
|
<Skeleton className="h-10 w-28" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Card key={i} variant="glass" className="p-5">
|
|
<Skeleton className="h-10 w-10 rounded-xl mb-3" />
|
|
<Skeleton className="h-9 w-20 mb-2" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<Card variant="glass" className="lg:col-span-2 p-8">
|
|
<Skeleton className="h-6 w-32 mb-4" />
|
|
<Skeleton className="h-64 w-full rounded-lg" />
|
|
</Card>
|
|
<div className="space-y-6">
|
|
<Card variant="glass" className="p-6">
|
|
<Skeleton className="h-4 w-24 mb-6" />
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Skeleton key={i} className="h-24 rounded-2xl" />
|
|
))}
|
|
</div>
|
|
</Card>
|
|
<Card variant="glass" className="p-6">
|
|
<Skeleton className="h-4 w-28 mb-6" />
|
|
<div className="space-y-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Skeleton key={i} className="h-8 w-full" />
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-12 w-full" />
|
|
<Card variant="glass" className="p-6">
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-16 w-full" />
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|