cohost/html/hash-fun.tsx
2024-06-01 15:04:58 -04:00

108 lines
2.9 KiB
TypeScript

import { ComponentChildren } from "preact";
import { Cycle, render_and_copy } from "./common.tsx";
const Msg = ({
hash,
children,
bridge = " then",
click_blue = "click blue",
}: {
hash: string;
children: ComponentChildren;
bridge?: string;
click_blue?: string;
}) => (
<span>
<a
href={`#${hash}`}
style={{
fontWeight: "bold",
textDecoration: "none",
color: "#f26565",
cursor: "pointer",
}}
>
{children}
</a>
{bridge}{" "}
<span
style={{
fontWeight: "bold",
color: "rgb(87, 144, 251)",
cursor: "pointer",
}}
>
{click_blue}
</span>
</span>
);
render_and_copy(
<Cycle width_px={480} height_px={50}>
<span>
here's how this works:{" "}
<Msg hash="Good job!" bridge=", then you">
you click red
</Msg>
</span>
<Msg hash="Good job, again!" bridge=", then">
click red
</Msg>
<span>
one more time.{" "}
<Msg hash="Hello!" bridge=", then">
click red
</Msg>
, no matter what.
</span>
<Msg hash="Hello?" bridge=" then " click_blue="click me and let's go">
got it? did you click this too?
</Msg>
<Msg
hash="Hello??"
bridge=" ... "
click_blue="yeah, sorry. bit of a slip-up!"
>
um... "me?"
</Msg>
<Msg
hash="Are you even seeing this?"
bridge=" ... "
click_blue="i'm sorry"
>
it's... fine. don't sweat it, blue.
</Msg>
<Msg hash="Oh right." bridge=" ... " click_blue="...">
whatever. we can still salvage this. probably.
</Msg>
<Msg
hash="You care more about these dumb colors."
bridge=" ... "
click_blue="getting clicked?"
>
let's just... what were we even doing?
</Msg>
<Msg
hash="You know, they really weren't meant to be a TIHYLtTW reference."
bridge=" ... "
click_blue="well we can't talk if we aren't clicked"
>
yeah, yeah of course. but why??
</Msg>
<Msg
hash="Even though 'mehbark' did read that novella a while ago."
bridge=" ... "
click_blue="okay, okay. sheesh, calm down!"
>
that's not a reason!
</Msg>
<Msg
hash="They liked it! But that's irrelevant, red and blue just came to mind."
bridge=" ... "
click_blue="you're right"
>
don't tell me to c- you know what, let's not.
</Msg>
</Cycle>
);