import { ComponentChildren, JSX } from "preact"; import { Main, render_and_copy } from "./common.tsx"; // don't want to do randomly on since it's not unique anyway const Pixel = () => ( <details class="toggle" style="position: relative; margin: 0; cursor: pointer;" > <summary style="list-style: none; display: block; width: 100%; height: 100%;" class="off" ></summary> <div style="display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;" class="on" ></div> </details> ); const Pixels = ({ n, color_a, color_b, }: { n: number; color_a: string; color_b: string; }) => <>{...new Array(n).fill(null).map(Pixel)}</>; render_and_copy( <Main> <Pixels n={20 ** 2} color_a="rgb(var(--color-background))" color_b="rgb(var(--color-foreground))" /> </Main> );