51 lines
1.9 KiB
TypeScript
51 lines
1.9 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: rgb(222, 217, 211); color: rgb(var(--color-notBlack));">
|
||
|
|
<div
|
||
|
|
style={`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true' class='h-6 w-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'%3E%3C/path%3E%3C/svg%3E"); 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} />);
|