Skeleton

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Card, CardContent, CardHeader } from "@/registry/bases/radix/ui/card"
6import { Skeleton } from "@/registry/bases/radix/ui/skeleton"
7 
8export default function SkeletonExample() {
9  return (
10    <ExampleWrapper>
11      <SkeletonAvatar />
12      <SkeletonCard />
13      <SkeletonText />
14      <SkeletonForm />
15      <SkeletonTable />
16    </ExampleWrapper>
17  )
18}
19 
20function SkeletonAvatar() {
21  return (
22    <Example title="Avatar">
23      <div className="flex w-full items-center gap-4">
24        <Skeleton className="size-10 shrink-0 rounded-full" />
25        <div className="grid gap-2">
26          <Skeleton className="h-4 w-[150px]" />
27          <Skeleton className="h-4 w-[100px]" />
28        </div>
29      </div>
30    </Example>
31  )
32}
33 
34function SkeletonCard() {
35  return (
36    <Example title="Card">
37      <Card className="w-full">
38        <CardHeader>
39          <Skeleton className="h-4 w-2/3" />
40          <Skeleton className="h-4 w-1/2" />
41        </CardHeader>
42        <CardContent>
43          <Skeleton className="aspect-square w-full" />
44        </CardContent>
45      </Card>
46    </Example>
47  )
48}
49 
50function SkeletonText() {
51  return (
52    <Example title="Text">
53      <div className="flex w-full flex-col gap-2">
54        <Skeleton className="h-4 w-full" />
55        <Skeleton className="h-4 w-full" />
56        <Skeleton className="h-4 w-3/4" />
57      </div>
58    </Example>
59  )
60}
61 
62function SkeletonForm() {
63  return (
64    <Example title="Form">
65      <div className="flex w-full flex-col gap-7">
66        <div className="flex flex-col gap-3">
67          <Skeleton className="h-4 w-20" />
68          <Skeleton className="h-10 w-full" />
69        </div>
70        <div className="flex flex-col gap-3">
71          <Skeleton className="h-4 w-24" />
72          <Skeleton className="h-10 w-full" />
73        </div>
74        <Skeleton className="h-9 w-24" />
75      </div>
76    </Example>
77  )
78}
79 
80function SkeletonTable() {
81  return (
82    <Example title="Table">
83      <div className="flex w-full flex-col gap-2">
84        <div className="flex gap-4">
85          <Skeleton className="h-4 flex-1" />
86          <Skeleton className="h-4 w-24" />
87          <Skeleton className="h-4 w-20" />
88        </div>
89        <div className="flex gap-4">
90          <Skeleton className="h-4 flex-1" />
91          <Skeleton className="h-4 w-24" />
92          <Skeleton className="h-4 w-20" />
93        </div>
94        <div className="flex gap-4">
95// … truncated