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} />);