Stat Card

npx shadcn@latest add @dami/stat-card

import * as React from "react"
import { ChevronRightIcon } from "lucide-react"
import { cn } from "@/registry/dami/lib/utils"

type StatCardProps = React.ComponentProps<"div"> & {
  /** Icon rendered inside the dark square tile. */
  icon?: React.ReactNode
  /** The headline number. */
  value: React.ReactNode
  /** Caption under the number. */
  label: React.ReactNode
  /** Optional action rendered top-right (e.g. a link). */
  action?: React.ReactNode
}

/**
 * KPI tile from the dashboard reference: icon in a dark rounded square,
 * a "View details" action, then the big number and its label.
 */
function StatCard({
  icon,
  value,
  label,
  action,
  className,
  ...props
}: StatCardProps) {
  return (
    <div
      data-slot="stat-card"
      className={cn(
        "flex flex-col gap-5 rounded-2xl border border-border/60 bg-card p-4 shadow-soft",
        className
      )}
      {...props}
    >
      <div className="flex items-start justify-between gap-3">
        {icon ? (
          <span className="inline-flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground [&_svg]:size-4">
            {icon}
          </span>
        ) : (
          <span />
        )}
        {action ?? (
          <span className="inline-flex items-center gap-0.5 text-xs font-medium text-muted-foreground">
            View details
            <ChevronRightIcon className="size-3.5" />
          </span>
        )}
      </div>
      <div className="flex flex-col gap-0.5">
        <div className="text-2xl font-semibold tracking-tight">{value}</div>
        <div className="text-sm text-muted-foreground">{label}</div>
      </div>
    </div>
  )
}

export { StatCard }