44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
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 = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
|
|
<details
|
|
class="toggle"
|
|
style="position: relative; margin: 0; cursor: pointer;"
|
|
>
|
|
<summary
|
|
style={`list-style: none; margin: 0; display: block; width: 100%; height: 100%; background-color: ${color_a};`}
|
|
></summary>
|
|
<div
|
|
style={`margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none; background-color: ${color_b};`}
|
|
></div>
|
|
</details>
|
|
);
|
|
|
|
const Pixels = ({
|
|
n,
|
|
color_a,
|
|
color_b,
|
|
}: {
|
|
n: number;
|
|
color_a: string;
|
|
color_b: string;
|
|
}) => (
|
|
<>
|
|
{...new Array(n)
|
|
.fill(null)
|
|
.map(() => <Pixel color_a={color_a} color_b={color_b} />)}
|
|
</>
|
|
);
|
|
|
|
render_and_copy(
|
|
<Main>
|
|
<Pixels
|
|
n={20 ** 2}
|
|
color_a="rgb(var(--color-background))"
|
|
color_b="rgb(var(--color-foreground))"
|
|
/>
|
|
</Main>
|
|
);
|