31 lines
920 B
TypeScript
31 lines
920 B
TypeScript
interface HeadRingProps {
|
|
headIds: string[]
|
|
activeHeads: string[]
|
|
}
|
|
|
|
export function HeadRing({ headIds, activeHeads }: HeadRingProps) {
|
|
const n = headIds.length
|
|
const radius = 80
|
|
|
|
return (
|
|
<div className="head-ring">
|
|
<svg viewBox="-120 -120 240 240" className="head-ring-svg">
|
|
{headIds.map((id, i) => {
|
|
const angle = (2 * Math.PI * i) / n - Math.PI / 2
|
|
const x = radius * Math.cos(angle)
|
|
const y = radius * Math.sin(angle)
|
|
const isActive = activeHeads.includes(id)
|
|
return (
|
|
<g key={id} transform={`translate(${x}, ${y})`}>
|
|
<circle r="12" className={`head-glyph ${isActive ? "active" : ""}`} data-head={id} />
|
|
<text y="4" textAnchor="middle" fontSize="8" fill="currentColor">
|
|
{id.slice(0, 2)}
|
|
</text>
|
|
</g>
|
|
)
|
|
})}
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|