Stat

import { Stat, StatDetail, StatLabel, StatValue } from "@/components/vip-ui/stat";export function StatDemo() {  return (    <Stat className="w-full max-w-xs">      <StatLabel>Active projects</StatLabel>      <StatValue>24</StatValue>      <StatDetail>Up 3 from last month</StatDetail>    </Stat>  );}

import {  Stat,  StatDetail,  StatLabel,  StatTrend,  StatValue,} from "@/components/vip-ui/stat";const stats = [  {    label: "Revenue",    value: "$48,200",    change: "+12%",    direction: "up",    invert: false,  },  {    label: "Active users",    value: "9,630",    change: "−3%",    direction: "down",    invert: false,  },  {    label: "Churn rate",    value: "1.8%",    change: "−0.4 pt",    direction: "down",    invert: true,  },] as const;export function StatTrendDemo() {  return (    <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-3">      {stats.map((stat) => (        <Stat key={stat.label}>          <StatLabel>{stat.label}</StatLabel>          <StatValue>{stat.value}</StatValue>          <StatDetail>            <StatTrend direction={stat.direction} invert={stat.invert}>              {stat.change}            </StatTrend>            From last month          </StatDetail>        </Stat>      ))}    </div>  );}

import {  ClockIcon,  CurrencyDollarIcon,  ShoppingCartIcon,  UsersIcon,} from "@phosphor-icons/react/ssr";import {  Stat,  StatDetail,  StatGroup,  StatIcon,  StatLabel,  StatTrend,  StatValue,} from "@/components/vip-ui/stat";export function StatGroupDemo() {  return (    <StatGroup className="w-full max-w-3xl">      <Stat>        <StatIcon>          <CurrencyDollarIcon />        </StatIcon>        <StatLabel>Revenue</StatLabel>        <StatValue>$48.2k</StatValue>        <StatDetail>          <StatTrend direction="up">+12%</StatTrend>        </StatDetail>      </Stat>      <Stat>        <StatIcon>          <ShoppingCartIcon />        </StatIcon>        <StatLabel>Orders</StatLabel>        <StatValue>1,284</StatValue>        <StatDetail>          <StatTrend direction="up">+8%</StatTrend>        </StatDetail>      </Stat>      <Stat>        <StatIcon>          <UsersIcon />        </StatIcon>        <StatLabel>Customers</StatLabel>        <StatValue>9,630</StatValue>        <StatDetail>          <StatTrend direction="neutral">0%</StatTrend>        </StatDetail>      </Stat>      <Stat>        <StatIcon>          <ClockIcon />        </StatIcon>        <StatLabel>Response time</StatLabel>        <StatValue>1.4 h</StatValue>        <StatDetail>          <StatTrend direction="down" invert>            −22 min          </StatTrend>        </StatDetail>      </Stat>    </StatGroup>  );}

"use client";import { PulseIcon } from "@phosphor-icons/react";import { useEffect, useState } from "react";import { AnimatedNumber } from "@/components/vip-ui/animated-number";import {  Stat,  StatDetail,  StatIcon,  StatLabel,  StatValue,} from "@/components/vip-ui/stat";const readings = [1284, 1302, 1297, 1331, 1318, 1356, 1349, 1372];export function StatLiveDemo() {  const [index, setIndex] = useState(0);  useEffect(() => {    const timer = setInterval(      () => setIndex((current) => (current + 1) % readings.length),      2200,    );    return () => clearInterval(timer);  }, []);  return (    <Stat className="w-full max-w-xs">      <StatIcon className="text-success">        <PulseIcon />      </StatIcon>      <StatLabel>Visitors online</StatLabel>      <StatValue>        <AnimatedNumber value={readings[index]} variant="slide" />      </StatValue>      <StatDetail>Updates every few seconds</StatDetail>    </Stat>  );}