104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
const ANALYSTS = [
|
|
{
|
|
id: 'market',
|
|
label: 'Market',
|
|
full: 'Market Analyst',
|
|
desc: 'Price action & technicals',
|
|
dot: '#4480FF',
|
|
},
|
|
{
|
|
id: 'news',
|
|
label: 'News',
|
|
full: 'News Analyst',
|
|
desc: 'Sentiment & headlines',
|
|
dot: '#A78BFA',
|
|
},
|
|
{
|
|
id: 'fundamentals',
|
|
label: 'Fundamentals',
|
|
full: 'Fundamentals Analyst',
|
|
desc: 'Earnings & financials',
|
|
dot: '#00CE68',
|
|
},
|
|
{
|
|
id: 'social',
|
|
label: 'Social',
|
|
full: 'Social Analyst',
|
|
desc: 'Social media signals',
|
|
dot: '#F59E0B',
|
|
},
|
|
]
|
|
|
|
type Props = {
|
|
selected: string[]
|
|
onChange: (selected: string[]) => void
|
|
}
|
|
|
|
export default function AnalystSelector({ selected, onChange }: Props) {
|
|
const toggle = (id: string) => {
|
|
onChange(selected.includes(id) ? selected.filter((s) => s !== id) : [...selected, id])
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4">
|
|
{ANALYSTS.map(({ id, label, desc, dot, full }) => {
|
|
const active = selected.includes(id)
|
|
return (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
title={full}
|
|
onClick={() => toggle(id)}
|
|
className="relative p-4 text-left transition-all duration-200"
|
|
style={{
|
|
background: active ? 'var(--bg-active)' : 'var(--bg-elevated)',
|
|
border: active ? `1px solid ${dot}40` : '1px solid var(--border)',
|
|
borderTop: active ? `2px solid ${dot}` : '1px solid var(--border)',
|
|
borderRadius: '10px',
|
|
}}
|
|
>
|
|
{/* Color dot */}
|
|
<div
|
|
className="w-2 h-2 rounded-full mb-3"
|
|
style={{
|
|
background: dot,
|
|
boxShadow: active ? `0 0 6px ${dot}80` : 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Check */}
|
|
{active && (
|
|
<div
|
|
className="absolute top-3 right-3 w-4 h-4 rounded-full flex items-center justify-center"
|
|
style={{ background: dot, opacity: 0.9 }}
|
|
>
|
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
|
|
<polyline points="1.5,4 3,5.5 6.5,2" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="text-sm font-semibold mb-0.5"
|
|
style={{
|
|
color: active ? 'var(--text-high)' : 'var(--text-mid)',
|
|
fontFamily: 'var(--font-manrope)',
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
<div
|
|
className="text-[11px] leading-snug"
|
|
style={{ color: 'var(--text-low)' }}
|
|
>
|
|
{desc}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|