Loom Loader Demo

1import { LoomLoader } from "@/registry/loomui/loom-loader"
2 
3const SIZES = [
4  { label: "Small", className: "size-6", strands: 3, duration: 1400 },
5  { label: "Default", className: "size-10", strands: 5, duration: 1400 },
6  {
7    label: "Wide and slow",
8    className: "text-accent size-16",
9    strands: 7,
10    duration: 2000,
11  },
12]
13 
14export default function LoomLoaderDemo() {
15  return (
16    <div className="grid w-full max-w-md grid-cols-3 gap-4 sm:gap-8">
17      {SIZES.map((size) => (
18        <div key={size.label} className="flex flex-col items-center gap-4">
19          {/* A fixed slot so three different sizes share one baseline and the
20              labels below them line up. */}
21          <div className="grid h-16 place-items-center">
22            <LoomLoader
23              className={size.className}
24              strands={size.strands}
25              duration={size.duration}
26            />
27          </div>
28          <span className="text-muted-foreground text-center text-xs text-balance">
29            {size.label}
30          </span>
31        </div>
32      ))}
33    </div>
34  )
35}