Number Flow Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Minus, Plus } from "lucide-react";
5import {
6  type InputEventHandler,
7  type PointerEventHandler,
8  useEffect,
9  useRef,
10  useState,
11} from "react";
12import { NumberFlow } from "@/components/sora-ui/texts/number-flow";
13 
14const EXAMPLES = [
15  { id: "currency", label: "Currency" },
16  { id: "input", label: "Input" },
17  { id: "countdown", label: "Countdown" },
18] as const;
19 
20type ExampleId = (typeof EXAMPLES)[number]["id"];
21 
22function ExampleTabs({
23  active,
24  onChange,
25}: {
26  active: ExampleId;
27  onChange: (id: ExampleId) => void;
28}) {
29  return (
30    <div className="flex flex-wrap justify-center gap-1.5">
31      {EXAMPLES.map(({ id, label }) => (
32        <button
33          className={cn(
34            "rounded-md border px-2.5 py-1 text-xs transition-colors",
35            active === id
36              ? "border-foreground/20 bg-accent text-foreground"
37              : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
38          )}
39          key={id}
40          onClick={() => onChange(id)}
41          type="button"
42        >
43          {label}
44        </button>
45      ))}
46    </div>
47  );
48}
49 
50function CurrencyDemo() {
51  const [value, setValue] = useState(1234.56);
52 
53  return (
54    <div className="flex flex-col items-center gap-6">
55      <NumberFlow
56        className="font-semibold text-5xl tabular-nums"
57        format={{
58          style: "currency",
59          currency: "USD",
60        }}
61        value={value}
62      />
63      <div className="flex flex-wrap justify-center gap-2">
64        <button
65          className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent"
66          onClick={() => setValue((v) => Math.max(0, v - 87.4))}
67          type="button"
68        >
69          −87.4
70        </button>
71        <button
72          className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent"
73          onClick={() => setValue((v) => v + 87.4)}
74          type="button"
75        >
76          +87.4
77        </button>
78        <button
79          className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent"
80          onClick={() => setValue(Math.round(Math.random() * 10_000) / 100)}
81          type="button"
82        >
83          Randomize
84        </button>
85      </div>
86    </div>
87  );
88}
89 
90function InputDemo() {
91  const [value, setValue] = useState(42);
92  const defaultValue = useRef(value);
93  const inputRef = useRef<HTMLInputElement>(null);
94  const [animated, setAnimated] = useState(true);
95  const min = 0;
96  const max = 999;
97// … truncated