75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
|
import { ComponentChildren, toChildArray } from "preact";
|
||
|
|
import { Main, render_and_copy, shuffle, n_of } from "./common.tsx";
|
||
|
|
|
||
|
|
const Tag = ({ tag }: { tag: string }) => (
|
||
|
|
<a href={`https://cohost.org/rc/tagged/${tag}`}>{`#${tag}`}</a>
|
||
|
|
);
|
||
|
|
|
||
|
|
const tags = `\
|
||
|
|
CSS Crimes
|
||
|
|
borgesposting
|
||
|
|
NEISVoid
|
||
|
|
circling the square
|
||
|
|
retrocomputing
|
||
|
|
cats of cohost
|
||
|
|
coho film club
|
||
|
|
cohost crafts
|
||
|
|
the cohost plural feed
|
||
|
|
cohost summer mixtape
|
||
|
|
trans trucks
|
||
|
|
The Cohost Local Feed (Minnesota)
|
||
|
|
cohost draws
|
||
|
|
tv head
|
||
|
|
make up a mech pilot
|
||
|
|
frasierposting
|
||
|
|
cohost utilities`.split("\n");
|
||
|
|
|
||
|
|
// repeating makes it seem more random
|
||
|
|
export const PseudoRandom = ({
|
||
|
|
children,
|
||
|
|
repeat = 5,
|
||
|
|
}: {
|
||
|
|
children: ComponentChildren;
|
||
|
|
repeat?: number;
|
||
|
|
}) => (
|
||
|
|
<div
|
||
|
|
class="pseudo-random"
|
||
|
|
style={{
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: `repeat(${
|
||
|
|
toChildArray(children).length * repeat
|
||
|
|
}, 1fr)`,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{...n_of(repeat, toChildArray(children))
|
||
|
|
.map(shuffle)
|
||
|
|
.flat()
|
||
|
|
.map(child => <Choice>{child}</Choice>)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
/// width is 0-1
|
||
|
|
export const Choice = ({ children }: { children: ComponentChildren }) => (
|
||
|
|
<details
|
||
|
|
style={{
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
display: "inline-block",
|
||
|
|
cursor: "pointer",
|
||
|
|
}}
|
||
|
|
class="choice"
|
||
|
|
>
|
||
|
|
<summary
|
||
|
|
style={{ listStyle: "none", width: "100%", height: "100%" }}
|
||
|
|
></summary>
|
||
|
|
<div class="result">{children}</div>
|
||
|
|
</details>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<Main>
|
||
|
|
Click for a random @TagOfTheDay tag
|
||
|
|
<PseudoRandom>{...tags.map(tag => <Tag tag={tag} />)}</PseudoRandom>
|
||
|
|
</Main>
|
||
|
|
);
|