42 lines
868 B
TypeScript
42 lines
868 B
TypeScript
|
import { Cycle, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
const emojis = [
|
||
|
|
"🏡",
|
||
|
|
"🌳",
|
||
|
|
"🌲",
|
||
|
|
"🎄",
|
||
|
|
"🐦",
|
||
|
|
"🦊",
|
||
|
|
"🐻",
|
||
|
|
"🐶",
|
||
|
|
"🐕",
|
||
|
|
"🐩",
|
||
|
|
"🦈",
|
||
|
|
];
|
||
|
|
|
||
|
|
const Emoji = ({ children }: { children: string }) => <div>{children}</div>;
|
||
|
|
|
||
|
|
const Cell = () => (
|
||
|
|
<Cycle width_px={60} height_px={60} style={{}}>
|
||
|
|
<Emoji> </Emoji>
|
||
|
|
{...emojis.map(e => <Emoji>{e}</Emoji>)}
|
||
|
|
</Cycle>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: "calc(60px * 7)",
|
||
|
|
aspectRatio: "1",
|
||
|
|
margin: "0 auto",
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: "repeat(7, 1fr)",
|
||
|
|
fontSize: "40px",
|
||
|
|
outline: "1px solid black",
|
||
|
|
backgroundColor: "#296639",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{...Array.from({ length: 49 }, () => <Cell />)}
|
||
|
|
</div>
|
||
|
|
);
|