kpi-02

1'use client'
2 
3import { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'
4import { Trend } from '@/registry/components/dashboardblocks/trend'
5 
6import { CardDescription } from '@/components/ui/card'
7 
8interface KPI2Props {
9  trend: number
10  title: string
11  value: number
12}
13 
14const exampleProps: KPI2Props = {
15  trend: 12.5,
16  title: 'Active Users',
17  value: 2420,
18}
19 
20const KPI2 = (props: KPI2Props) => {
21  const { trend, title, value } = props
22  return (
23    <KPI>
24      <KPIContent className='space-y-2'>
25        <div className='flex items-center justify-between'>
26          <CardDescription>{title}</CardDescription>
27          <Trend trend={trend} variant='badge' />
28        </div>
29        <KPIValue value={value} animated />
30      </KPIContent>
31    </KPI>
32  )
33}
34 
35export { KPI2, exampleProps as kpi2ExampleProps, type KPI2Props }