Spinners

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 SpinnersSection() {
29  return (
30    <SectionCard title="Spinners" sourceSlug="/ui/source/ui-elements/spinners">
31      <div className="flex flex-wrap items-center gap-6">
32        <div className="flex items-center gap-2">
33          <div className="size-5 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
34          <span className="text-sm text-gray-500 dark:text-gray-400">Small</span>
35        </div>
36        <div className="flex items-center gap-2">
37          <div className="size-8 animate-spin rounded-full border-[3px] border-brand-500 border-t-transparent" />
38          <span className="text-sm text-gray-500 dark:text-gray-400">Medium</span>
39        </div>
40        <div className="flex items-center gap-2">
41          <div className="size-12 animate-spin rounded-full-4 border-4 border-brand-500 border-t-transparent" />
42          <span className="text-sm text-gray-500 dark:text-gray-400">Large</span>
43        </div>
44        <div className="flex items-center gap-2">
45          <div className="size-8 animate-spin rounded-full border-[3px] border-success-500 border-t-transparent" />
46          <span className="text-sm text-gray-500 dark:text-gray-400">Success</span>
47        </div>
48        <div className="flex items-center gap-2">
49          <div className="size-8 animate-spin rounded-full border-[3px] border-warning-500 border-t-transparent" />
50          <span className="text-sm text-gray-500 dark:text-gray-400">Warning</span>
51        </div>
52        <div className="flex items-center gap-2">
53          <div className="size-8 animate-spin rounded-full border-[3px] border-error-500 border-t-transparent" />
54          <span className="text-sm text-gray-500 dark:text-gray-400">Error</span>
55        </div>
56      </div>
57    </SectionCard>
58  );
59}