cohost/html/this-is-not-a-chost.tsx

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