Metric Card

import type { ComponentProps, ReactNode } from "react"
import { TrendDownIcon, TrendUpIcon } from "@phosphor-icons/react/dist/ssr"

import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardAction,
  CardDescription,
  CardHeader,
} from "@/components/ui/card"

type MetricCardProps = Omit<
  ComponentProps<typeof Card>,
  "title" | "children" | "size"
> & {
  /**
   * The stock `Card` size: `default` puts 24px of space around and between
   * the card's parts, `sm` 16px.
   */
  size?: ComponentProps<typeof Card>["size"]
  /** The metric's name, shown as a small muted label at the top. */
  name: ReactNode
  /** The figure itself, in large type with tabular numerals. */
  value: ReactNode
  /**
   * A change badge in the top-right corner. `value` is its visible text,
   * `trend` picks an up or down arrow, and `label` is read to screen readers
   * before the value, since the arrow is hidden from them.
   */
  change?: { value: ReactNode; trend: "up" | "down"; label: string }
  /** A line of muted text under the value. */
  description?: ReactNode
}

/**
 * A card that shows one metric on a dashboard: its name, its value in large
 * type, an optional change badge and an optional line of text below.
 *
 * It takes no children. `className` and other props land on the `Card`.
 */
function MetricCard({
  name,
  value,
  change,
  description,
  ...props
}: MetricCardProps) {
  return (
    <Card data-slot="metric-card" {...props}>
      <CardHeader>
        <CardDescription>{name}</CardDescription>
        {change && (
          <CardAction>
            <Badge variant="outline">
              {change.trend === "up" ? (
                <TrendUpIcon
                  weight="light"
                  aria-hidden="true"
                  data-icon="inline-start"
                />
              ) : (
                <TrendDownIcon
                  weight="light"
                  aria-hidden="true"
                  data-icon="inline-start"
                />
              )}
              <span className="sr-only">{change.label}</span>
              {change.value}
            </Badge>
          </CardAction>
        )}
        <p className="text-2xl font-medium tabular-nums">{value}</p>
        {description != null && (
          <CardDescription>{description}</CardDescription>
        )}
      </CardHeader>
    </Card>
  )
}

export { MetricCard }
export type { MetricCardProps }
export default MetricCard

pnpm dlx shadcn add @01orbital/metric-card

npx shadcn add @01orbital/metric-card

yarn shadcn add @01orbital/metric-card

bunx --bun shadcn add @01orbital/metric-card