هيكل التحميل

import { Skeleton } from 'topclassui/skeleton'

/** The docs previewer stage: a circle beside three lines, where shrink-0 keeps it round. */
export default function Demo() {
  return (
    <div className="flex max-w-sm items-center gap-4">
      <Skeleton variant="circle" />
      <Skeleton />
    </div>
  )
}

import { Skeleton } from 'topclassui/skeleton'

/** The four shapes at their own default sizes, in a column the width of a narrow card. */
export default function Demo() {
  return (
    <div className="flex max-w-sm flex-col gap-6">
      <Skeleton />
      <Skeleton variant="circle" />
      <Skeleton variant="rect" />
      <Skeleton variant="card" />
    </div>
  )
}

import { Skeleton } from 'topclassui/skeleton'

/** One row stays full width; with more than one, the last is two thirds, like a paragraph's end. */
export default function Demo() {
  return (
    <div className="grid max-w-2xl grid-cols-3 items-start gap-6">
      <Skeleton rows={1} />
      <Skeleton />
      <Skeleton rows={5} />
    </div>
  )
}

import { Skeleton } from 'topclassui/skeleton'

/** Three rows beside three lines of real text that never wrap, at two type steps, so a height mismatch shows. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="grid max-w-xl grid-cols-2 items-start gap-6 text-sm">
        <p className="text-body">
          <span className="block truncate">Invoice 2041 was paid</span>
          <span className="block truncate">on the seventh of October</span>
          <span className="block truncate">by bank transfer.</span>
        </p>
        <Skeleton rows={3} />
      </div>
      <div className="grid max-w-xl grid-cols-2 items-start gap-6 text-lg">
        <p className="text-body">
          <span className="block truncate">Invoice 2041 was paid</span>
          <span className="block truncate">on the seventh of October</span>
          <span className="block truncate">by bank transfer.</span>
        </p>
        <Skeleton rows={3} />
      </div>
    </div>
  )
}

import { Skeleton } from 'topclassui/skeleton'

/** Real dimensions through className, passed last: the circle's size, the rect's height and width,
 * the card's width and radius, and the width and type step of two text rows. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-6">
      <Skeleton variant="circle" className="size-12" />
      <Skeleton variant="rect" className="h-control-sm w-32" />
      <Skeleton variant="card" className="w-64 rounded-control" />
      <Skeleton rows={2} className="w-48 text-lg" />
    </div>
  )
}

import { Skeleton } from 'topclassui/skeleton'

/** In right to left the circle sits at the right and the short last row starts there too;
 * the card below has no side to mirror. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex max-w-sm flex-col gap-6">
      <div className="flex items-center gap-4">
        <Skeleton variant="circle" />
        <Skeleton />
      </div>
      <Skeleton variant="card" />
    </div>
  )
}