31 lines
806 B
TypeScript
31 lines
806 B
TypeScript
import { useRenderer } from "@opentui/solid"
|
|
|
|
export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
|
|
const renderer = useRenderer()
|
|
|
|
const getLayerIndicator = () => {
|
|
const indicators = []
|
|
for (let i = 0; i < 4; i++) {
|
|
const isActive = i <= layerDepth
|
|
const color = isActive ? "var(--color-accent)" : "var(--color-muted)"
|
|
const size = isActive ? "●" : "○"
|
|
indicators.push(
|
|
<text fg={color} marginRight={1}>
|
|
{size}
|
|
</text>
|
|
)
|
|
}
|
|
return indicators
|
|
}
|
|
|
|
return (
|
|
<box flexDirection="row" alignItems="center">
|
|
<text fg="var(--color-muted)" marginRight={1}>Depth:</text>
|
|
{getLayerIndicator()}
|
|
<text fg="var(--color-muted)" marginLeft={1}>
|
|
{layerDepth}
|
|
</text>
|
|
</box>
|
|
)
|
|
}
|