KPI

1'use client'
2 
3import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
4import { ComponentProps } from 'react'
5 
6import { Card, CardContent } from '@/components/ui/card'
7 
8import { cn } from '@/lib/utils'
9 
10export const KPI = (props: ComponentProps<typeof Card>) => {
11  return <Card {...props} />
12}
13 
14export const KPIContent = (props: ComponentProps<typeof CardContent>) => {
15  return (
16    <CardContent
17      {...props}
18      className={cn('flex flex-col flex-1 justify-between', props.className)}
19    />
20  )
21}
22 
23interface KPIValueProps {
24  animated?: boolean
25  className?: string
26  formatter?: (value: number) => string
27  value: number
28}
29 
30const defaultFormatter = (value: number): string => value.toLocaleString()
31 
32export const KPIValue = ({
33  animated = false,
34  className = '',
35  formatter = defaultFormatter,
36  value,
37}: KPIValueProps) => {
38  const displayValue = animated ? (
39    <AnimatedNumber value={value} formatter={formatter} />
40  ) : (
41    formatter(value)
42  )
43 
44  return <div className={`text-3xl font-bold ${className}`}>{displayValue}</div>
45}
46 
47export type { KPIValueProps }