mehbark
a5c0895563
maybe i didn't have to? removing the interrobang from the headline somehow worked
40 lines
981 B
TypeScript
40 lines
981 B
TypeScript
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>
|
|
);
|