Sanitized mirror from private repository - 2026-04-18 11:19:59 UTC

dashboard/ui/components/skeleton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+export function Skeleton({ className = "", style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <div className={`animate-pulse rounded-lg bg-white/[0.06] ${className}`} style={style} />
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="rounded-2xl border border-white/[0.08] p-5 space-y-3" style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-8 w-24" />
+      <Skeleton className="h-3 w-32" />
+    </div>
+  );
+}
+
+export function CardSkeleton({ lines = 4, className = "" }: { lines?: number; className?: string }) {
+  return (
+    <div className={`rounded-2xl border border-white/[0.08] p-5 space-y-3 ${className}`} style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-4 w-32 mb-2" />
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className="h-3" style={{ width: `${70 + Math.random() * 30}%` }} />
+      ))}
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-8 w-full rounded-lg" />
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className="h-6 w-full rounded" />
+      ))}
+    </div>
+  );
+}