spb/company-atlas

1import { cn } from '@/lib/cn';23export function Skeleton({ className }: { className?: string }) {4  return <div className={cn('skeleton', className)} aria-hidden />;5}67export function SkeletonRows({ rows = 6, className }: { rows?: number; className?: string }) {8  return (9    <div className={cn('space-y-2', className)} aria-busy="true" aria-live="polite">10      {Array.from({ length: rows }).map((_, i) => (11        <div key={i} className="flex items-center gap-3 py-2">12          <Skeleton className="h-3 w-14" />13          <Skeleton className="h-3 flex-1" />14          <Skeleton className="h-3 w-20" />15        </div>16      ))}17    </div>18  );19}2021export function SkeletonTiles({ n = 4, className }: { n?: number; className?: string }) {22  return (23    <div className={cn('grid grid-cols-2 gap-6 md:grid-cols-4', className)} aria-busy="true">24      {Array.from({ length: n }).map((_, i) => (25        <div key={i} className="space-y-2 py-3">26          <Skeleton className="h-2.5 w-20" />27          <Skeleton className="h-7 w-24" />28          <Skeleton className="h-2.5 w-16" />29        </div>30      ))}31    </div>32  );33}34