kpi-03

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 KPI3Props {
10  trend: number
11  description: string
12  title: string
13  value: number
14  formatter?: ValueFormatter
15}
16 
17const exampleProps: KPI3Props = {
18  trend: -2.1,
19  description: 'Compared to last month',
20  title: 'Conversion Rate',
21  value: 3.24,
22  formatter: (value) => `${value.toLocaleString()}%`,
23}
24 
25const KPI3 = (props: KPI3Props) => {
26  const { trend, description, title, value, formatter } = props
27  return (
28    <KPI>
29      <KPIContent className='space-y-2'>
30        <CardDescription>{title}</CardDescription>
31        <KPIValue value={value} formatter={formatter} animated />
32        <div className='flex items-center justify-between border-t pt-2 mt-3'>
33          <CardDescription>{description}</CardDescription>
34          <Trend trend={trend} variant='badge' />
35        </div>
36      </KPIContent>
37    </KPI>
38  )
39}
40 
41export { KPI3, exampleProps as kpi3ExampleProps, type KPI3Props }