cohost/html/hot_people_who_eat_croissants_are_dangerous.tsx

72 lines
1.5 KiB
TypeScript

import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
const peopleify = (...people: string[]): string[] =>
people.map(p => `${p} people`);
const wheel = (...items: Html[]): Html => (
<div class="wheel">
{...items.map(i => <div class="wheel-item">{i}</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={peopleify(
"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",
]}
/>
);