Number Segment Meter

import { NumberSegmentMeter } from '@/components/ui/number-segment-meter'

import { NumberSegmentMeter } from '@/components/ui/number-segment-meter'

export default function NumberSegmentMeterDemo() {
  return (
    <div className="mx-auto flex min-h-[320px] w-full max-w-lg flex-col justify-center px-4 py-16 sm:px-6">
      <div className="rounded-2xl border border-border/60 bg-card p-5 sm:p-6">
        <div className="mb-6 flex items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
              Meridian Studio · Team plan
            </p>
            <p className="mt-2 text-lg font-semibold tracking-tight text-balance text-foreground">
              Seat capacity this billing cycle
            </p>
            <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
              Seven of ten contracted seats are assigned. The tick marks the
              minimum roster before a cohort can launch.
            </p>
          </div>
          <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground sm:text-xs">
            INV-2408
          </span>
        </div>

        <NumberSegmentMeter
          value={7}
          max={10}
          label="Seats filled"
          readout="7 of 10"
          threshold={6}
          size="md"
        />
      </div>
    </div>
  )
}