Skeleton

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Skeleton
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Article</CardTitle>
          <CardDescription>A card waiting for its content.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <Skeleton shape="rounded" width="100%" height={140} animation="wave" />
            <Skeleton width="60%" height={20} animation="wave" />
            <Skeleton width="100%" animation="wave" />
            <Skeleton width="88%" animation="wave" />
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          <CardDescription>
            The skeletons stay hidden from assistive technology; one status
            announces the loading.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <p role="status">Loading profile…</p>
            <div className="flex flex-wrap items-center gap-3 min-w-0">
              <Skeleton shape="circular" width={48} height={48} />
              <div className="grid gap-3 min-w-0 flex-1 min-w-0">
                <Skeleton width="60%" height={16} />
                <Skeleton width="40%" height={14} />
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>List</CardTitle>
          <CardDescription>Repeating rows while a collection loads.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            {
              [0, 1, 2].map((row) => (<div
                key={row}
                className="flex flex-wrap items-center gap-3 min-w-0"
              >
                <Skeleton shape="circular" width={36} height={36} />
                <div className="grid gap-3 min-w-0 flex-1 min-w-0">
                  <Skeleton width="45%" height={14} />
                  <Skeleton width="75%" height={12} />
                </div>
              </div>))
            }
          </div>
        </CardContent>
      </Card>
    </div>
  );
}