Skeleton

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

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

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