AnimatedNumber

import { AnimatedNumber } from "@fanvue/ui";
import type { AnimatedNumberProps, AnimatedNumberVariant } from "@fanvue/ui";

import { AnimatedNumber } from "@fanvue/ui";

<AnimatedNumber value={1234} variant="count" durationMs={0} />

import { AnimatedNumber } from "@fanvue/ui";

const formatPrice = (value: number) =>
  `$${(Math.round(value) / 100).toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;

const GROSS = 12_804_673;

<AnimatedNumber value={GROSS} variant="roll" durationMs={0} format={formatPrice} />

import * as React from "react";
import { AnimatedNumber, Button } from "@fanvue/ui";

const formatPrice = (value: number) =>
  `$${(Math.round(value) / 100).toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;

const GROSS = 12_804_673;

const NET = 10_243_738;

function Example() {
  const [value, setValue] = React.useState(GROSS);

  return (
    <div className="flex w-96 flex-col items-start gap-6">
      <Button
        variant="secondary"
        size="40"
        onClick={() => setValue((current) => (current === GROSS ? NET : GROSS))}
      >
        Toggle net / gross
      </Button>

      <div className="flex flex-col gap-1">
        <span className="typography-description-12px-regular text-content-secondary">
          roll — headline figure
        </span>
        <span className="typography-header-heading-lg text-content-primary">
          <AnimatedNumber value={value} format={formatPrice} variant="roll" />
        </span>
      </div>

      <div className="flex flex-col gap-1">
        <span className="typography-description-12px-regular text-content-secondary">
          count — supporting figure
        </span>
        <span className="typography-body-default-16px-semibold text-content-primary">
          <AnimatedNumber value={value} format={formatPrice} variant="count" />
        </span>
      </div>
    </div>
  );
}

import * as React from "react";
import { AnimatedNumber, Button } from "@fanvue/ui";

const formatPrice = (value: number) =>
  `$${(Math.round(value) / 100).toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;

function Example() {
  const [value, setValue] = React.useState(999_99);

  return (
    <div className="flex w-96 flex-col items-start gap-6">
      <Button
        variant="secondary"
        size="40"
        onClick={() => setValue((current) => (current === 999_99 ? 1_000_00 : 999_99))}
      >
        Cross the thousand
      </Button>
      <span className="typography-header-heading-lg text-content-primary">
        <AnimatedNumber value={value} format={formatPrice} variant="roll" />
      </span>
    </div>
  );
}