Animated Number

"use client";

import { useState } from "react";
import { AnimatedNumber } from "@/components/ui/animated-number";
import { Button } from "@/components/ui/button";

export function Revenue() {
  const [revenue, setRevenue] = useState(12480);

  return (
    <div className="flex items-center gap-4">
      <AnimatedNumber
        value={revenue}
        format={(value) => `$${Math.round(value).toLocaleString("en-US")}`}
        className="text-3xl font-bold tabular-nums"
      />
      <Button variant="outline" onClick={() => setRevenue(revenue + 1250)}>
        Add a sale
      </Button>
    </div>
  );
}