mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gonna move the color to out-of-line styles

Browse source
This commit is contained in:
mehbark 2023-07-20 22:43:01 -04:00
parent cdfa4a4d69
commit fc95938ad8
1 changed files with 27 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
html/pixels.tsx
View file

@ -1,63 +1,43 @@
import { ComponentChildren, JSX } from "preact"; import { ComponentChildren, JSX } from "preact";
import { Main, render_and_copy } from "./common.tsx"; import { Main, render_and_copy } from "./common.tsx";
// kind of made this not generic :( // don't want to do randomly on since it's not unique anyway
const Toggle = ({ a, b }: { a: JSX.Element; b: JSX.Element }) => ( const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
<details <details
class="toggle" class="toggle"
style="position: relative; margin: 0; cursor: pointer;" style="position: relative; margin: 0; cursor: pointer;"
> >
<summary style="list-style: none;"> <summary
<div style="margin: 0; display: block; width: 100%; height: 100%;"> style={`list-style: none; margin: 0; display: block; width: 100%; height: 100%; background-color: ${color_a};`}
{a} ></summary>
</div> <div
</summary> style={`margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none; background-color: ${color_b};`}
<div style="margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;"> ></div>
{b}
</div>
</details> </details>
); );
const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => ( const Pixels = ({
<Toggle n,
a={ color_a,
<div color_b,
style={{ }: {
backgroundColor: color_a, n: number;
width: "100%", color_a: string;
height: "100%", color_b: string;
}} }) => (
/> <>
} {...new Array(n)
b={ .fill(null)
<div .map(() => <Pixel color_a={color_a} color_b={color_b} />)}
style={{ </>
backgroundColor: color_b,
width: "100%",
height: "100%",
}}
/>
}
/>
); );
render_and_copy( render_and_copy(
<Main> <Main>
<Pixel color_a="white" color_b="black" /> <Pixels
<Pixel color_a="white" color_b="black" /> n={20 ** 2}
<Pixel color_a="white" color_b="black" /> color_a="rgb(var(--color-background))"
<Pixel color_a="white" color_b="black" /> color_b="rgb(var(--color-foreground))"
<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> </Main>
); );