Trend

1import { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'
2import { type VariantProps, cva } from 'class-variance-authority'
3import { ArrowDown, ArrowUp, Minus, TrendingDown, TrendingUp } from 'lucide-react'
4 
5import { cn } from '@/lib/utils'
6 
7type TrendDirection = 'up' | 'down' | 'neutral'
8 
9const trendVariants = cva('', {
10  variants: {
11    variant: {
12      default: 'flex items-center text-sm font-medium',
13      'icon-only': 'h-4 w-4',
14      badge:
15        'flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold',
16    },
17    direction: {
18      up: '',
19      down: '',
20      neutral: '',
21    },
22  },
23  compoundVariants: [
24    {
25      variant: 'default',
26      direction: 'up',
27      class: 'text-green-600',
28    },
29    {
30      variant: 'default',
31      direction: 'down',
32      class: 'text-red-600',
33    },
34    {
35      variant: 'default',
36      direction: 'neutral',
37      class: 'text-gray-500',
38    },
39    {
40      variant: 'icon-only',
41      direction: 'up',
42      class: 'text-green-600',
43    },
44    {
45      variant: 'icon-only',
46      direction: 'down',
47      class: 'text-red-600',
48    },
49    {
50      variant: 'icon-only',
51      direction: 'neutral',
52      class: 'text-gray-500',
53    },
54    {
55      variant: 'badge',
56      direction: 'up',
57      class: 'bg-green-100 text-green-800 border-green-200',
58    },
59    {
60      variant: 'badge',
61      direction: 'down',
62      class: 'bg-red-100 text-red-800 border-red-200',
63    },
64    {
65      variant: 'badge',
66      direction: 'neutral',
67      class: 'bg-gray-100 text-gray-800 border-gray-200',
68    },
69  ],
70  defaultVariants: {
71    variant: 'default',
72    direction: 'neutral',
73  },
74})
75 
76interface TrendProps extends Omit<VariantProps<typeof trendVariants>, 'direction'> {
77  animated?: boolean
78  className?: string
79  formatter?: (value: number) => string
80  trend: number
81  trendIcon?: 'arrow' | 'trend'
82}
83 
84const defaultFormatter = (value: number): string => {
85  const prefix = value > 0 ? '+' : ''
86  return `${prefix}${value.toLocaleString()}%`
87}
88 
89function getTrendDirection(value: number): TrendDirection {
90  if (value > 0) return 'up'
91  if (value < 0) return 'down'
92  return 'neutral'
93}
94 
95function Trend({
96  animated = false,
97  className,
98  formatter = defaultFormatter,
99  trend,
100  trendIcon = 'trend',
101  variant = 'default',
102}: TrendProps) {
103  const direction = getTrendDirection(trend)
104  const TrendIcon =
105    direction === 'up' ? TrendingUp : direction === 'down' ? TrendingDown : Minus
106// … truncated