Icon Morph Demo

1"use client"
2 
3import * as React from "react"
4 
5import { IconMorph, type IconMorphSet } from "@/registry/loomui/icon-morph"
6 
7const SETS: { set: IconMorphSet; off: string; on: string }[] = [
8  { set: "menu", off: "Open menu", on: "Close menu" },
9  { set: "plus", off: "Add thread", on: "Cancel" },
10  { set: "play", off: "Play", on: "Pause" },
11  { set: "chevron", off: "Continue", on: "Done" },
12]
13 
14export default function IconMorphDemo() {
15  const [active, setActive] = React.useState<Record<string, boolean>>({})
16 
17  return (
18    <div className="flex flex-col items-center gap-4">
19      <div className="flex items-center gap-2">
20        {SETS.map(({ set, off, on }) => (
21          <button
22            key={set}
23            type="button"
24            aria-pressed={active[set] ?? false}
25            aria-label={active[set] ? on : off}
26            onClick={() =>
27              setActive((current) => ({ ...current, [set]: !current[set] }))
28            }
29            className="ease-out-quart text-foreground/70 hover:text-foreground flex size-11 items-center justify-center transition-colors duration-180"
30          >
31            <IconMorph set={set} active={active[set] ?? false} />
32          </button>
33        ))}
34      </div>
35      <p className="text-muted-foreground text-xs">
36        One shape the whole way. Nothing crossfades.
37      </p>
38    </div>
39  )
40}