51 lines
2 KiB
TypeScript
51 lines
2 KiB
TypeScript
import { render_and_copy } from "./common.tsx";
|
|
|
|
const ThisIsNotAChost = ({
|
|
depth = 1,
|
|
max_depth,
|
|
}: {
|
|
depth?: number;
|
|
max_depth: number;
|
|
}) => (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div
|
|
class="labeled"
|
|
style={{ flex: "1", width: "90%", overflow: "hidden" }}
|
|
>
|
|
{depth < max_depth ? (
|
|
<ThisIsNotAChost depth={depth + 1} max_depth={max_depth} />
|
|
) : (
|
|
<span style={{ fontSize: `${1 / depth}rem` }}>hi lol</span>
|
|
)}
|
|
</div>
|
|
<div
|
|
class="label"
|
|
style={{
|
|
fontSize: `${1 / depth}rem`,
|
|
textAlign: "center",
|
|
marginTop: "0.5rem",
|
|
flex: "1",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div style="box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 0.75rem; border-radius: 0.5rem; padding: 0.75rem; background-color: #ffe8d4; color: rgb(var(--color-notBlack));">
|
|
<div
|
|
style={`background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzgzMjU0RiIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0ibTExLjI1IDExLjI1LjA0MS0uMDJhLjc1Ljc1IDAgMCAxIDEuMDYzLjg1MmwtLjcwOCAyLjgzNmEuNzUuNzUgMCAwIDAgMS4wNjMuODUzbC4wNDEtLjAyMU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMHptLTktMy43NWguMDA4di4wMDhIMTJWOC4yNXoiLz48L3N2Zz4="); background-repeat: no-repeat; width: ${
|
|
1.5 / depth
|
|
}rem; height: ${1.5 / depth}rem; display: inline-block;`}
|
|
></div>
|
|
<div>Ceci n'est pas une chost</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(<ThisIsNotAChost max_depth={25} />);
|