64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
|
import { ComponentChildren, JSX } from "preact";
|
||
|
|
import { Main, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
// kind of made this not generic :(
|
||
|
|
const Toggle = ({ a, b }: { a: JSX.Element; b: JSX.Element }) => (
|
||
|
|
<details
|
||
|
|
class="toggle"
|
||
|
|
style="position: relative; margin: 0; cursor: pointer;"
|
||
|
|
>
|
||
|
|
<summary style="list-style: none;">
|
||
|
|
<div style="margin: 0; display: block; width: 100%; height: 100%;">
|
||
|
|
{a}
|
||
|
|
</div>
|
||
|
|
</summary>
|
||
|
|
<div style="margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;">
|
||
|
|
{b}
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
|
||
|
|
<Toggle
|
||
|
|
a={
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: color_a,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
b={
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: color_b,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<Main>
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
<Pixel color_a="white" color_b="black" />
|
||
|
|
</Main>
|
||
|
|
);
|