k
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
type BadgeVariant = 'bullish' | 'bearish' | 'neutral' | 'long' | 'short' | 'x' | 'truth'
|
|
|
|
interface BadgeProps {
|
|
variant: BadgeVariant
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
const variantStyles: Record<BadgeVariant, string> = {
|
|
bullish: 'bg-[#0d2e1a] text-[#4ade80] border border-[#1a4a2a]',
|
|
bearish: 'bg-[#2e0d0d] text-[#ef4444] border border-[#4a1a1a]',
|
|
neutral: 'bg-[#141414] text-[#555555] border border-[#1e1e1e]',
|
|
long: 'bg-[#0d2e1a] text-[#4ade80] border border-[#1a4a2a]',
|
|
short: 'bg-[#2e0d0d] text-[#ef4444] border border-[#4a1a1a]',
|
|
x: 'bg-[#141414] text-white border border-[#222222]',
|
|
truth: 'bg-[#1a1a2e] text-[#818cf8] border border-[#2a2a4a]',
|
|
}
|
|
|
|
const variantLabels: Record<BadgeVariant, string> = {
|
|
bullish: 'Bullish',
|
|
bearish: 'Bearish',
|
|
neutral: 'Neutral',
|
|
long: 'Long',
|
|
short: 'Short',
|
|
x: 'X',
|
|
truth: 'Truth',
|
|
}
|
|
|
|
export default function Badge({ variant, children }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${variantStyles[variant]}`}
|
|
>
|
|
{children ?? variantLabels[variant]}
|
|
</span>
|
|
)
|
|
}
|