Skeleton list

export const Default = () => (
  <div style={{ width: 460 }}>
    <SkeletonList />
  </div>
);

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)', width: 460 }}>
    <Labeled text="with avatars — listings of people, companies, activities">
      <SkeletonList rows={3} />
    </Labeled>
    <Labeled text="without avatars — tables and listings whose rows start with text">
      <SkeletonList rows={3} avatar={false} />
    </Labeled>
  </div>
);

export const Sizes = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)', width: 460 }}>
    <Labeled text="rows=2 — a panel or a rail section">
      <SkeletonList rows={2} />
    </Labeled>
    <Labeled text="rows=4 (default) — a listing above the fold">
      <SkeletonList rows={4} />
    </Labeled>
    <Labeled text="rows=8 — a full page listing; match the count to what the viewport shows, no more">
      <SkeletonList rows={8} />
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)', width: 460 }}>
    <style>{AV_CSS}</style>
    <Labeled text="loading — aria-busy on the wrapper, shimmer on the lines">
      <SkeletonList rows={3} />
    </Labeled>
    <Labeled text="loaded — the same three rows with real values, same rhythm">
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 'var(--sp-4)',
          padding: 'var(--sp-4) 0',
        }}
      >
        {[
          ['Jan Novák', 'před 2 h'],
          ['Petra Dvořáková', 'včera'],
          ['ATOL Capital', 'pondělí'],
        ].map(([name, time]) => (
          <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
            <span className="ds-av22" />
            <span style={{ font: 'var(--p)' }}>{name}</span>
            <span style={{ marginLeft: 'auto', font: 'var(--small)', color: 'var(--fg-muted)' }}>
              {time}
            </span>
          </div>
        ))}
      </div>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{
      width: 520,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)',
      overflow: 'hidden',
      background: 'var(--bg-canvas)',
    }}
  >
    <div className="tbar">
      <div className="tbar-id">
        <span className="tbar-h">Aktivita</span>
      </div>
    </div>
    <div style={{ padding: '0 var(--sp-4)' }}>
      <SkeletonList rows={4} />
    </div>
    <div style={{ borderTop: '1px solid var(--border)', padding: 'var(--sp-3) var(--sp-4)' }}>
      <SkLine w={120} sm />
    </div>
  </div>
);