spb/fabri-ka Public

1interface SkeletonProps {2  width?: string3  height?: string4  radius?: string5  className?: string6}78export default function Skeleton({9  width = '100%',10  height = '1rem',11  radius = '8px',12  className = '',13}: SkeletonProps) {14  return (15    <span16      className={`skeleton ${className}`}17      style={{ width, height, borderRadius: radius, display: 'block' }}18      aria-hidden="true"19    />20  )21}2223export function ProductCardSkeleton() {24  return (25    <div className="card product-card product-card-skeleton">26      <Skeleton height="auto" radius="10px" className="skeleton-square" />27      <div className="product-card-body">28        <Skeleton height="0.85rem" width="90%" />29        <Skeleton height="0.85rem" width="60%" />30        <Skeleton height="1.1rem" width="40%" />31      </div>32    </div>33  )34}3536export function SkeletonGrid({ count = 10 }: { count?: number }) {37  return (38    <div className="product-grid">39      {Array.from({ length: count }, (_, i) => (40        <ProductCardSkeleton key={i} />41      ))}42    </div>43  )44}4546export function SkeletonRow({ count = 6 }: { count?: number }) {47  return (48    <div className="rail-track">49      {Array.from({ length: count }, (_, i) => (50        <div className="rail-item" key={i}>51          <ProductCardSkeleton />52        </div>53      ))}54    </div>55  )56}57