emarref.net
A daily game
1import { cva } from "class-variance-authority";
2import { VariantHeader } from "./variant-header";
3
4const header = cva("grid", {
5 variants: {
6 orientation: {
7 vertical: "grid-rows-subgrid row-start-3 -row-end-3",
8 horizontal: "grid-cols-subgrid col-start-3 -col-end-3",
9 },
10 position: {
11 left: "col-start-2",
12 top: "row-start-2",
13 right: "-col-start-2",
14 bottom: "-row-start-2",
15 },
16 },
17});
18
19interface Props {
20 variant: number;
21 position: "left" | "top" | "right" | "bottom";
22 blocks: number[][];
23}
24
25export function VariantHints({ variant, position, blocks }: Props) {
26 const orientation = ["top", "bottom"].includes(position)
27 ? "horizontal"
28 : "vertical";
29 return (
30 <div className={header({ position, orientation })}>
31 {blocks.map((_, i) => (
32 <div
33 key={i}
34 className={[
35 "flex items-center",
36 orientation === "horizontal" ? "flex-col" : "",
37 position === "left" ? "justify-end" : "",
38 position === "top" ? "justify-end" : "",
39 ].join(" ")}
40 >
41 <VariantHeader
42 key={i}
43 orientation={
44 orientation === "horizontal" ? "vertical" : "horizontal"
45 }
46 index={i}
47 variant={variant}
48 />
49 </div>
50 ))}
51 </div>
52 );
53}