Skeleton

1import { Skeleton } from '@/components/ui/skeleton';
2
3// Two placeholder rows shaped like the members table: avatar, name, email,
4// role badge and a row action.
5const rows = ['first', 'second'];
6
7export function Default() {
8  return (
9    <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">
10      <div className="mb-4 flex items-center justify-between">
11        <p className="text-sm font-medium">Members</p>
12        <Skeleton className="h-4 w-16" />
13      </div>
14      <div className="flex flex-col gap-4">
15        {rows.map((row) => (
16          <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">
17            <div className="flex min-w-0 flex-1 items-center gap-3">
18              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
19              <div className="min-w-0 flex-1 space-y-2">
20                <Skeleton className="h-3.5 w-full max-w-32" />
21                <Skeleton className="h-3 w-full max-w-44" />
22              </div>
23            </div>
24            <div className="flex shrink-0 items-center gap-2">
25              <Skeleton className="h-5 w-14 rounded-sm" />
26              <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />
27            </div>
28          </div>
29        ))}
30      </div>
31    </div>
32  );
33}

1import { Skeleton } from '@/components/ui/skeleton';
2
3// Two placeholder rows shaped like the members table: avatar, name, email,
4// role badge and a row action.
5const rows = ['first', 'second'];
6
7export function Default() {
8  return (
9    <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">
10      <div className="mb-4 flex items-center justify-between">
11        <p className="text-sm font-medium">Members</p>
12        <Skeleton className="h-4 w-16" />
13      </div>
14      <div className="flex flex-col gap-4">
15        {rows.map((row) => (
16          <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">
17            <div className="flex min-w-0 flex-1 items-center gap-3">
18              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
19              <div className="min-w-0 flex-1 space-y-2">
20                <Skeleton className="h-3.5 w-full max-w-32" />
21                <Skeleton className="h-3 w-full max-w-44" />
22              </div>
23            </div>
24            <div className="flex shrink-0 items-center gap-2">
25              <Skeleton className="h-5 w-14 rounded-sm" />
26              <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />
27            </div>
28          </div>
29        ))}
30      </div>
31    </div>
32  );
33}

1import { Skeleton } from '@/components/ui/skeleton';
2
3// Placeholder for a project card: preview image, title, two lines of summary,
4// then the owner row and the deploy status at the bottom.
5const summaryLines = ['h-3.5 w-full', 'h-3.5 w-4/5'];
6
7export function Card() {
8  return (
9    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
10      <Skeleton className="h-[140px] w-full rounded-lg" />
11      <div className="mt-4 space-y-2">
12        <Skeleton className="h-5 w-40" />
13        {summaryLines.map((line) => (
14          <Skeleton key={line} className={line} />
15        ))}
16      </div>
17      <div className="border-border mt-4 flex items-center justify-between border-t pt-4">
18        <div className="flex items-center gap-2">
19          <Skeleton className="h-6 w-6 rounded-full" />
20          <Skeleton className="h-3 w-24" />
21        </div>
22        <Skeleton className="h-5 w-16 rounded-sm" />
23      </div>
24    </div>
25  );
26}