import { TrendingUp } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Card } from '@/components/ui/card' import { cn } from '@/lib/utils' const sizeStyles = { default: { shell: 'h-40', cardWrap: 'w-56', backCard: 'absolute -top-3 -right-3 h-28 w-44 rotate-3 rounded-2xl opacity-60', frontCard: 'rounded-2xl p-4', label: 'text-xs', headerGap: '', value: 'mt-2 text-2xl', chart: 'mt-3 h-12 gap-1', }, lg: { shell: 'h-64 sm:h-72', cardWrap: 'w-full max-w-md', backCard: 'absolute -top-5 right-2 h-full w-3/4 rotate-6 rounded-2xl opacity-50 sm:right-0', frontCard: 'rounded-2xl p-5', label: 'text-sm', headerGap: 'gap-3', value: 'mt-4 text-3xl', chart: 'mt-5 h-20 gap-1.5', }, } as const const sparkBySize = { default: [ 'h-3', 'h-5', 'h-4', 'h-6', 'h-4', 'h-7', 'h-5', 'h-6', 'h-4', 'h-7', 'h-5', 'h-6', ], lg: [ 'h-6', 'h-10', 'h-8', 'h-14', 'h-9', 'h-16', 'h-12', 'h-20', 'h-10', 'h-16', 'h-14', 'h-20', ], } as const export function Spot01({ size = 'default', className, }: Readonly<{ size?: keyof typeof sizeStyles className?: string }>) { const vs = sizeStyles[size] const spark = sparkBySize[size] return (

Revenue 12%

$48,262

{spark.map((height, index) => (

))}

) }