kpi-01

1'use client'
2 
3import { ValueFormatter } from '@/registry/components/dashboardblocks/chart'
4import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
5import { Trend } from '@/registry/components/dashboardblocks/trend'
6 
7import { CardDescription } from '@/components/ui/card'
8 
9interface KPI1Props {
10  trend: number
11  title: string
12  value: number
13  formatter?: ValueFormatter
14}
15 
16const exampleProps: KPI1Props = {
17  trend: 20.1,
18  title: 'Total Revenue',
19  value: 45231,
20  formatter: (value) => `$${value.toLocaleString()}`,
21}
22 
23const KPI1 = (props: KPI1Props) => {
24  const { trend, title, value, formatter } = props
25 
26  return (
27    <KPI>
28      <KPIContent className='space-y-2'>
29        <CardDescription>{title}</CardDescription>
30        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1'>
31          <KPIValue value={value} formatter={formatter} animated />
32          <Trend trend={trend} />
33        </div>
34      </KPIContent>
35    </KPI>
36  )
37}
38 
39export { KPI1, exampleProps as kpi1ExampleProps, type KPI1Props }