← back to Patty

components/Skeleton.tsx

50 lines

'use client';

export function SkeletonCard() {
  return (
    <div className="card" style={{ padding: '1rem' }}>
      <div style={{ display: 'flex', alignItems: 'start', gap: 12 }}>
        <div className="skeleton" style={{ width: 40, height: 40, borderRadius: 10, flexShrink: 0 }} />
        <div style={{ flex: 1 }}>
          <div className="skeleton" style={{ width: '60%', height: 14, borderRadius: 4, marginBottom: 8 }} />
          <div className="skeleton" style={{ width: '40%', height: 10, borderRadius: 4, marginBottom: 12 }} />
          <div className="skeleton" style={{ width: '90%', height: 10, borderRadius: 4, marginBottom: 6 }} />
          <div className="skeleton" style={{ width: '75%', height: 10, borderRadius: 4 }} />
        </div>
      </div>
    </div>
  );
}

export function SkeletonStatCard() {
  return (
    <div className="stat-card" style={{ padding: '1.25rem' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div className="skeleton" style={{ width: 36, height: 36, borderRadius: 8 }} />
      </div>
      <div className="skeleton" style={{ width: '50%', height: 24, borderRadius: 4, marginBottom: 6 }} />
      <div className="skeleton" style={{ width: '70%', height: 10, borderRadius: 4 }} />
    </div>
  );
}

export function SkeletonList({ count = 4 }: { count?: number }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonCard key={i} />
      ))}
    </div>
  );
}

export function SkeletonStats({ count = 4 }: { count?: number }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 16 }}>
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonStatCard key={i} />
      ))}
    </div>
  );
}