import * as React from "react"

import { cn } from "@/lib/utils"

export interface StatsBandItem {
  value: string
  label: string
}

export interface StatsBandProps extends React.ComponentProps<"section"> {
  stats: StatsBandItem[]
}

export function StatsBand({ stats, className, ...props }: StatsBandProps) {
  return (
    <section className={cn("w-full rounded-2xl border bg-card px-6 py-10 text-card-foreground", className)} {...props}>
      <dl className="mx-auto grid max-w-5xl grid-cols-2 gap-y-8 md:flex md:items-stretch md:justify-between md:gap-0">
        {stats.map((stat, i) => (
          <React.Fragment key={stat.label}>
            {i > 0 && <div className="hidden w-px self-stretch bg-border md:block" aria-hidden />}
            <div className="flex flex-col-reverse items-center gap-1 px-4 text-center md:flex-1">
              <dt className="text-sm text-muted-foreground">{stat.label}</dt>
              <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd>
            </div>
          </React.Fragment>
        ))}
      </dl>
    </section>
  )
}

Props

StatsBandProps

Install

More like this

Announcement Bar

Feature Grid

Testimonial Grid