63d9566ee4
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m19s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 30s
CI / test-python-voice (push) Successful in 32s
CI / test-bqas (push) Successful in 33s
- KPICard: accept string values (e.g. "380+") without NaN - Remove cap-table slide from order + sidebar - Remove Land & Expand arrow from Pricing slide Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { TrendingUp, TrendingDown } from 'lucide-react'
|
|
import AnimatedCounter from './AnimatedCounter'
|
|
|
|
interface KPICardProps {
|
|
label: string
|
|
value: number | string
|
|
prefix?: string
|
|
suffix?: string
|
|
decimals?: number
|
|
trend?: 'up' | 'down' | 'neutral'
|
|
color?: string
|
|
delay?: number
|
|
subLabel?: string
|
|
}
|
|
|
|
export default function KPICard({
|
|
label,
|
|
value,
|
|
prefix = '',
|
|
suffix = '',
|
|
decimals = 0,
|
|
trend = 'neutral',
|
|
color = '#6366f1',
|
|
delay = 0,
|
|
subLabel,
|
|
}: KPICardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay }}
|
|
className="relative overflow-hidden bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-2xl p-4"
|
|
>
|
|
{/* Glow effect */}
|
|
<div
|
|
className="absolute -top-8 -right-8 w-24 h-24 rounded-full blur-3xl opacity-20"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
|
|
<p className="text-[10px] uppercase tracking-wider text-white/40 mb-1 text-center">{label}</p>
|
|
<div className="flex items-end justify-center gap-2">
|
|
<p className="text-2xl font-bold text-white leading-none">
|
|
{typeof value === 'string' ? `${prefix}${value}${suffix}` : <AnimatedCounter target={value} prefix={prefix} suffix={suffix} duration={1200} decimals={decimals} />}
|
|
</p>
|
|
{trend !== 'neutral' && (
|
|
<span className={`flex items-center gap-0.5 text-xs pb-0.5 ${trend === 'up' ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{trend === 'up' ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{subLabel && (
|
|
<p className="text-[10px] text-white/30 mt-1 text-center">{subLabel}</p>
|
|
)}
|
|
</motion.div>
|
|
)
|
|
}
|