getting rid of toggle
This commit is contained in:
parent
7913133c66
commit
cdfa4a4d69
2 changed files with 64 additions and 1 deletions
|
@ -95,6 +95,7 @@ const Pieces = () => {
|
|||
|
||||
render_and_copy(
|
||||
<Main>
|
||||
<Pieces />
|
||||
<Row n={0} />
|
||||
<Row n={1} />
|
||||
<Row n={2} />
|
||||
|
@ -103,7 +104,6 @@ render_and_copy(
|
|||
<Row n={5} />
|
||||
<Row n={6} />
|
||||
<Row n={7} />
|
||||
<Pieces />
|
||||
</Main>,
|
||||
true
|
||||
);
|
||||
|
|
63
html/pixels.tsx
Normal file
63
html/pixels.tsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
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>
|
||||
);
|
Loading…
Reference in a new issue