Skeleton

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5const lines = [{ className: 'h-4 w-[200px]' }, { className: 'h-4 w-[160px]' }];
6
7export function Default() {
8  return (
9    <div className="flex items-center gap-4">
10      <Skeleton className="h-12 w-12 rounded-full" />
11      <div className="space-y-2">
12        {lines.map((line, i) => (
13          <Skeleton key={i} className={line.className} />
14        ))}
15      </div>
16    </div>
17  );
18}

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5const lines = [{ className: 'h-4 w-[200px]' }, { className: 'h-4 w-[160px]' }];
6
7export function Default() {
8  return (
9    <div className="flex items-center gap-4">
10      <Skeleton className="h-12 w-12 rounded-full" />
11      <div className="space-y-2">
12        {lines.map((line, i) => (
13          <Skeleton key={i} className={line.className} />
14        ))}
15      </div>
16    </div>
17  );
18}

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5const lines = [{ className: 'h-5 w-3/4' }, { className: 'h-4 w-full' }, { className: 'h-4 w-5/6' }];
6
7const actions = [{ className: 'h-9 w-24 rounded-md' }, { className: 'h-9 w-24 rounded-md' }];
8
9export function Card() {
10  return (
11    <div className="border-border w-full max-w-sm space-y-4 rounded-xl border p-6">
12      <Skeleton className="h-[140px] w-full rounded-lg" />
13      <div className="space-y-2">
14        {lines.map((line, i) => (
15          <Skeleton key={i} className={line.className} />
16        ))}
17      </div>
18      <div className="flex gap-2 pt-2">
19        {actions.map((action, i) => (
20          <Skeleton key={i} className={action.className} />
21        ))}
22      </div>
23    </div>
24  );
25}