Spool Demo

1"use client"
2 
3import * as React from "react"
4 
5import { Spool, SpoolItem } from "@/registry/loomui/spool"
6 
7const STATES = ["idle", "playing", "saved"]
8const DWELL = 2600
9 
10/** Five bars on five clocks, so the meter never pulses as one block. */
11function Meter() {
12  return (
13    <span aria-hidden="true" className="flex items-end gap-[3px]">
14      {[0.9, 1.4, 0.7, 1.2, 1].map((rate, index) => (
15        <span
16          key={index}
17          className="bg-accent animate-spool-meter h-3.5 w-[3px] rounded-full"
18          style={{
19            animationDuration: `${rate}s`,
20            animationDelay: `${index * -0.31}s`,
21          }}
22        />
23      ))}
24    </span>
25  )
26}
27 
28export default function SpoolDemo() {
29  const [index, setIndex] = React.useState(0)
30  const value = STATES[index]
31 
32  const advance = React.useCallback(
33    () => setIndex((current) => (current + 1) % STATES.length),
34    []
35  )
36 
37  React.useEffect(() => {
38    const timer = window.setInterval(advance, DWELL)
39    return () => window.clearInterval(timer)
40  }, [advance])
41 
42  return (
43    <div className="flex flex-col items-center gap-4">
44      <Spool
45        value={value}
46        role="button"
47        tabIndex={0}
48        aria-label="Next state"
49        onClick={advance}
50        onKeyDown={(event) => {
51          if (event.key === "Enter" || event.key === " ") {
52            event.preventDefault()
53            advance()
54          }
55        }}
56        className="focus-visible:ring-ring/60 cursor-pointer focus-visible:ring-2 focus-visible:outline-none"
57      >
58        <SpoolItem value="idle">
59          <span className="bg-muted-foreground/40 size-2 rounded-full" />
60          <span className="text-sm font-medium">Idle, and smug about it</span>
61        </SpoolItem>
62 
63        <SpoolItem value="playing" className="gap-3 pr-5">
64          <span className="bg-accent/15 text-accent grid size-6 place-items-center rounded-full">
65            <svg
66              viewBox="0 0 24 24"
67              fill="currentColor"
68              aria-hidden="true"
69              className="size-2.5"
70            >
71              <path d="M8 5v14l11-7z" />
72            </svg>
73          </span>
74          <span className="font-mono text-sm">shuttle.mp3</span>
75          <Meter />
76        </SpoolItem>
77 
78        <SpoolItem value="saved">
79          <span className="bg-accent/15 text-accent grid size-5 place-items-center rounded-full">
80            <svg
81              viewBox="0 0 24 24"
82              fill="none"
83              stroke="currentColor"
84// … truncated