Data Box

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4 
5const dataBoxVariants = cva(
6  "border border-treasury-base bg-treasury-base-lightest flex flex-col",
7  {
8    variants: {
9      size: {
10        default: "min-w-[180px]",
11        sm: "min-w-[120px]",
12        xs: "min-w-[90px]",
13      },
14    },
15    defaultVariants: {
16      size: "default",
17    },
18  }
19)
20 
21const dataBoxLabelVariants = cva(
22  "font-sans text-treasury-base-dark border-b border-treasury-base-light",
23  {
24    variants: {
25      size: {
26        default: "px-4 py-3 text-base",
27        sm: "px-3 py-2 text-sm",
28        xs: "px-2 py-1.5 text-xs",
29      },
30    },
31    defaultVariants: {
32      size: "default",
33    },
34  }
35)
36 
37const dataBoxValueVariants = cva(
38  "font-heading font-bold text-treasury-ink",
39  {
40    variants: {
41      size: {
42        default: "px-4 py-4 text-4xl",
43        sm: "px-3 py-3 text-2xl",
44        xs: "px-2 py-2 text-lg",
45      },
46    },
47    defaultVariants: {
48      size: "default",
49    },
50  }
51)
52 
53export interface DataBoxProps
54  extends React.HTMLAttributes<HTMLDivElement>,
55    VariantProps<typeof dataBoxVariants> {
56  label: string
57  value: string | number
58}
59 
60function DataBox({
61  className,
62  size,
63  label,
64  value,
65  ...props
66}: DataBoxProps) {
67  return (
68    <div className={cn(dataBoxVariants({ size, className }))} {...props}>
69      <div className={cn(dataBoxLabelVariants({ size }))}>
70        {label}
71      </div>
72      <div className={cn(dataBoxValueVariants({ size }))}>
73        {value}
74      </div>
75    </div>
76  )
77}
78 
79export { DataBox, dataBoxVariants }