animated-number-demo

1"use client"
2 
3import { useState } from "react"
4import { Minus, Plus } from "lucide-react"
5import { toast } from "sonner"
6 
7import { Button } from "@/components/ui/button"
8import { Slider } from "@/components/ui/slider"
9import { AnimatedNumber } from "@/registry/default/ui/animated-number"
10import { GradientHeading } from "@/registry/default/ui/gradient-heading"
11import {
12  TextureCardContent,
13  TextureCardHeader,
14  TextureCardStyled,
15} from "@/registry/default/ui/texture-card"
16 
17function PrecisionExample() {
18  const [value, setValue] = useState(14.5678)
19 
20  return (
21    <TextureCardStyled>
22      <TextureCardHeader className="pl-3">
23        <GradientHeading size="xxs">Precision</GradientHeading>
24      </TextureCardHeader>
25      <TextureCardContent>
26        <div className="flex gap-2">
27          <div
28            className="text-2xl font-bold"
29            style={{ minWidth: "80px", textAlign: "left" }}
30          >
31            <AnimatedNumber value={value} precision={2} />
32          </div>
33          <Button
34            size="sm"
35            variant="ghost"
36            className="border border-primary/10 rounded-full ml-auto py-5"
37            onClick={() => setValue(value + 13.456)}
38          >
39            <Plus className="h-4 w-4" />
40          </Button>
41        </div>
42      </TextureCardContent>
43    </TextureCardStyled>
44  )
45}
46 
47function FormatExample() {
48  const [value, setValue] = useState(10)
49 
50  const customFormat = (num: number) => `$${num.toFixed(2)}`
51 
52  return (
53    <TextureCardStyled>
54      <TextureCardHeader className="pl-3">
55        <GradientHeading size="xxs">Format</GradientHeading>
56      </TextureCardHeader>
57      <TextureCardContent>
58        <div className="flex gap-2">
59          <div
60            className="text-2xl font-bold"
61            style={{ minWidth: "120px", textAlign: "left" }}
62          >
63            <AnimatedNumber value={value} format={customFormat} />
64          </div>
65          <Button
66            size="sm"
67            variant="ghost"
68            className="border border-primary/10 rounded-full ml-auto py-5"
69            onClick={() => setValue(value + 50)}
70          >
71            <Plus className="h-4 w-4" />
72          </Button>
73        </div>
74      </TextureCardContent>
75    </TextureCardStyled>
76  )
77}
78 
79function HooksExample() {
80  const [value, setValue] = useState(10)
81 
82  const handleAnimationStart = () => {
83    toast("🏁 Animation started ")
84  }
85 
86  const handleAnimationComplete = () => {
87    toast("✅ Animation completed ")
88  }
89 
90// … truncated