Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 3x 2304x 3x 2304x | import { Array, pipe } from 'effect'
import type { Html, HtmlBuilder } from 'foldkit/html'
import type { Grid } from '../../core/systems/types'
/** The interface is always dark, so swatches use each grid's on-dark colour at full strength. */
const swatchColor = (grid: Grid): string =>
`rgb(${pipe(grid.colors.onDark, Array.take(3), Array.map(String), Array.join(' '))})`
/** A grid's colour key, beside its toggle and its readout column name; faded when the grid is off. */
export const view = <Message>(
grid: Grid,
isDimmed: boolean,
h: HtmlBuilder<Message>,
): Html =>
h.span([
h.Class('inline-block h-2 w-2 shrink-0 rounded-[2px]'),
h.Style({
backgroundColor: swatchColor(grid),
opacity: isDimmed ? '0.3' : '1',
}),
h.AriaHidden(true),
])
|