Stat Card

pnpm dlx shadcn@latest add @whereui/stat-card

import { StatCard } from "@/components/ui/stat-card"<StatCard  label="พนักงานทั้งหมด"  value={248}  change={{ trend: "up", value: "+2.5% จากไตรมาสก่อน" }}/>

import * as React from "react"import {  MinusIcon,  TrendingDownIcon,  TrendingUpIcon,} from "lucide-react"import { cn } from "cn"import { Card } from "@/components/ui/card"export type StatCardChange = {  /** ทิศทางการเปลี่ยนแปลง — up สีเขียว, down สีแดง, flat สีเทา */  trend: "up" | "down" | "flat"  /** ข้อความการเปลี่ยนแปลง เช่น "+2.5%" หรือ "อดทนานี้ 12 รายการ" */  value: string}const changeTrendClasses = {  up: "text-success",  down: "text-destructive",  flat: "text-muted-foreground",} as constconst changeTrendIcons = {  up: TrendingUpIcon,  down: TrendingDownIcon,  flat: MinusIcon,} as constfunction StatCard({  className,  label,  value,  icon,  change,  ...props}: React.ComponentProps<"div"> & {  /** ป้ายตัวชี้วัด เช่น "พนักงานทั้งหมด" */  label: React.ReactNode  /** ตัวเลข KPI */  value: React.ReactNode  /** ไอคอนมุมขวาบน */  icon?: React.ReactNode  /** การเปลี่ยนแปลงเทียบก่อนหน้า */  change?: StatCardChange}) {  const TrendIcon = change ? changeTrendIcons[change.trend] : null  return (    <Card data-slot="stat-card" className={cn("gap-0 px-4", className)} {...props}>      <div className="flex items-start justify-between gap-2">        <div className="text-sm text-muted-foreground">{label}</div>        {icon ? (          <div            data-slot="stat-card-icon"            aria-hidden="true"            className="mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4"          >            {icon}          </div>        ) : null}      </div>      <div        data-slot="stat-card-value"        className="mt-2 font-heading text-2xl leading-tight font-semibold tracking-tight tabular-nums"      >        {value}      </div>      {change && TrendIcon ? (        <div          data-slot="stat-card-change"          className={cn(            "mt-1.5 flex items-center gap-1 text-xs font-medium",            changeTrendClasses[change.trend]          )}        >          <TrendIcon aria-hidden="true" className="size-3.5" />          {change.value}        </div>      ) : null}    </Card>  )}export { StatCard }