Skeletons

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function SkeletonLoadersSection() {
29  return (
30    <SectionCard title="Skeleton Loaders" sourceSlug="/ui/source/ui-elements/skeletons">
31      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
32        {/* Text Skeleton */}
33        <div className="space-y-3">
34          <div className="h-4 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
35          <div className="h-4 w-full animate-pulse rounded bg-gray-200 dark:bg-white/10" />
36          <div className="h-4 w-5/6 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
37          <div className="h-4 w-2/3 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
38        </div>
39
40        {/* Avatar Skeleton */}
41        <div className="flex items-center gap-3">
42          <div className="size-12 shrink-0 animate-pulse rounded-full bg-gray-200 dark:bg-white/10" />
43          <div className="flex-1 space-y-2">
44            <div className="h-4 w-1/2 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
45            <div className="h-3 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
46          </div>
47        </div>
48
49        {/* Card Skeleton */}
50        <div className="rounded-xl border border-gray-200 dark:border-white/5 p-4 space-y-3">
51          <div className="h-40 animate-pulse rounded-lg bg-gray-200 dark:bg-white/10" />
52          <div className="h-4 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
53          <div className="h-3 w-1/2 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
54        </div>
55
56        {/* Table Skeleton */}
57        <div className="space-y-3">
58          <div className="flex gap-4">
59            <div className="h-4 w-1/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
60            <div className="h-4 w-1/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
61            <div className="h-4 w-1/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
62            <div className="h-4 w-1/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
63          </div>
64          {[...Array(4)].map((_, i) => (
65            <div key={i} className="flex gap-4">
66              <div className="h-4 w-1/4 animate-pulse rounded bg-gray-100 dark:bg-white/5" />
67              <div className="h-4 w-1/4 animate-pulse rounded bg-gray-100 dark:bg-white/5" />
68              <div className="h-4 w-1/4 animate-pulse rounded bg-gray-100 dark:bg-white/5" />
69              <div className="h-4 w-1/4 animate-pulse rounded bg-gray-100 dark:bg-white/5" />
70            </div>
71          ))}
72        </div>
73      </div>
74    </SectionCard>
75  );
76}