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