36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
interface SentimentalityBarProps {
|
|
sentiment?: number // 0-100, where 0 is full Short (red), 100 is full Long (green), 50 is neutral
|
|
}
|
|
|
|
export function SentimentalityBar({ sentiment = 50 }: SentimentalityBarProps) {
|
|
const clampedSentiment = Math.max(0, Math.min(100, sentiment))
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="text-sm font-semibold">Market sentimentality</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-xs text-muted-foreground w-10">Short</div>
|
|
|
|
<div className="flex-1 relative">
|
|
{/* Fixed full-width gradient track — never changes */}
|
|
<div
|
|
className="h-3 w-full border border-border"
|
|
style={{ background: `linear-gradient(to right, #e81123 0%, #ffd700 50%, #107c10 100%)` }}
|
|
/>
|
|
|
|
{/* Independent marker — only this moves */}
|
|
<div
|
|
className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-5 bg-foreground border-2 border-background transition-all"
|
|
style={{ left: `${clampedSentiment}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground w-10 text-right">Long</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|