25 lines
772 B
TypeScript
25 lines
772 B
TypeScript
import { ArrowUp, ArrowDown, Minus } from 'lucide-react';
|
|
|
|
export interface TrendBadgeProps {
|
|
value: number; // -1..+1, 0 表示持平
|
|
className?: string;
|
|
}
|
|
|
|
export default function TrendBadge({ value, className = '' }: TrendBadgeProps) {
|
|
const isUp = value > 0.0001;
|
|
const isDown = value < -0.0001;
|
|
const cls = isUp
|
|
? 'bg-emerald-50 text-emerald-600'
|
|
: isDown
|
|
? 'bg-red-50 text-red-600'
|
|
: 'bg-slate-100 text-slate-500';
|
|
const Icon = isUp ? ArrowUp : isDown ? ArrowDown : Minus;
|
|
const sign = isUp ? '+' : '';
|
|
return (
|
|
<span className={`inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-[11px] font-bold ${cls} ${className}`}>
|
|
<Icon size={11} />
|
|
{sign}{(value * 100).toFixed(2)}%
|
|
</span>
|
|
);
|
|
}
|