47de301f77
- Boost text contrast in both themes - Strengthen border visibility (subtle borders now visible) - Convert 39 files from hardcoded dark:/light: to CSS vars - Tertiary text now more readable on both backgrounds
76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
interface SkeletonProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function Skeleton({ className = '' }: SkeletonProps) {
|
|
return (
|
|
<div
|
|
className={`bg-slate-200 dark:bg-slate-700 rounded animate-pulse ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function SkeletonCard() {
|
|
return (
|
|
<div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-5 w-32" />
|
|
<Skeleton className="h-4 w-20" />
|
|
</div>
|
|
<Skeleton className="h-8 w-8 rounded-lg" />
|
|
</div>
|
|
<div className="flex justify-between pt-3 border-t border-slate-100 dark:border-slate-700">
|
|
<Skeleton className="h-4 w-16" />
|
|
<Skeleton className="h-4 w-10" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonTable({ rows = 5 }: { rows?: number }) {
|
|
return (
|
|
<div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] overflow-hidden">
|
|
<div className="p-4 border-b border-[var(--color-border-default)]">
|
|
<Skeleton className="h-6 w-40" />
|
|
</div>
|
|
<div className="divide-y divide-slate-100 dark:divide-slate-700">
|
|
{Array.from({ length: rows }).map((_, i) => (
|
|
<div key={i} className="p-4 flex items-center gap-4">
|
|
<Skeleton className="h-4 w-1/4" />
|
|
<Skeleton className="h-4 w-1/3" />
|
|
<Skeleton className="h-4 w-1/6" />
|
|
<Skeleton className="h-4 w-16 ml-auto" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonMetricCard() {
|
|
return (
|
|
<div className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)]">
|
|
<Skeleton className="h-10 w-10 rounded-lg mb-3" />
|
|
<Skeleton className="h-8 w-12 mb-1" />
|
|
<Skeleton className="h-3 w-24" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonList({ items = 5 }: { items?: number }) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: items }).map((_, i) => (
|
|
<div key={i} className="bg-[var(--color-bg-elevated)] p-4 rounded-xl border border-[var(--color-border-default)] flex items-center gap-4">
|
|
<Skeleton className="h-10 w-10 rounded-full" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-3 w-1/2" />
|
|
</div>
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|