spb/datacenterindex

1import { cn } from "./cn";23export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {4  return <span aria-hidden className={cn("block animate-pulse-soft rounded-xs bg-surface-3", className)} style={style} />;5}67export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {8  return (9    <div className={cn("flex flex-col gap-2", className)} aria-hidden>10      {Array.from({ length: lines }).map((_, i) => (11        <Skeleton key={i} className="h-3" style={{ width: `${100 - (i % 3) * 18}%` }} />12      ))}13    </div>14  );15}1617export function SkeletonRows({ rows = 6, className }: { rows?: number; className?: string }) {18  return (19    <div className={cn("divide-y divide-hair", className)} aria-hidden>20      {Array.from({ length: rows }).map((_, i) => (21        <div key={i} className="flex items-center gap-3 py-2.5">22          <Skeleton className="size-2 rounded-full" />23          <Skeleton className="h-3 flex-1" style={{ maxWidth: `${55 + (i % 4) * 10}%` }} />24          <Skeleton className="h-3 w-12" />25        </div>26      ))}27    </div>28  );29}3031export function SkeletonBlock({ className }: { className?: string }) {32  return <Skeleton className={cn("h-40 w-full", className)} />;33}34