cohost/html/hot_people_who_eat_croissants_are_dangerous.tsx

69 lines
1.4 KiB
TypeScript
Raw Normal View History

2023-07-10 14:52:20 -04:00
import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
const wheel = (...items: Html[]): Html => (
<div class="wheel">
{...items.map(i => <div class="wheel-item">{i} people</div>)}
</div>
);
const Take: Component = ({ subjects, objects, adjectives }, _) => (
<div class="take">
{wheel(...subjects)} who eat {wheel(...objects)} are{" "}
{wheel(...adjectives)}
</div>
);
// might want to have the final item be seperate
debug_render(
<Take
subjects={[
"poor",
"fat",
"dumb",
"tall",
"short",
"poor",
"fat",
"dumb",
"tall",
"hot",
]}
objects={[
"apples",
"bread",
"pasta",
"candy",
"rice",
"beans",
"apples",
"bread",
"candy",
"rice",
"beans",
"apples",
"bread",
"pasta",
"candy",
"rice",
"croissants",
]}
adjectives={[
"vibes",
"mean",
"dumb",
"cool",
"hot",
"stupid",
"funny",
"vibes",
"mean",
"dumb",
"cool",
"hot",
"stupid",
"dangerous",
]}
/>
);