Something went wrong. Try again.
A daily game
Something went wrong. Try again.
1.4 kB · 53 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354import { cva } from "class-variance-authority";import { VariantHeader } from "./variant-header";
const header = cva("grid", { variants: { orientation: { vertical: "grid-rows-subgrid row-start-3 -row-end-3", horizontal: "grid-cols-subgrid col-start-3 -col-end-3", }, position: { left: "col-start-2", top: "row-start-2", right: "-col-start-2", bottom: "-row-start-2", }, },});
interface Props { variant: number; position: "left" | "top" | "right" | "bottom"; blocks: number[][];}
export function VariantHints({ variant, position, blocks }: Props) { const orientation = ["top", "bottom"].includes(position) ? "horizontal" : "vertical"; return ( <div className={header({ position, orientation })}> {blocks.map((_, i) => ( <div key={i} className={[ "flex items-center", orientation === "horizontal" ? "flex-col" : "", position === "left" ? "justify-end" : "", position === "top" ? "justify-end" : "", ].join(" ")} > <VariantHeader key={i} orientation={ orientation === "horizontal" ? "vertical" : "horizontal" } index={i} variant={variant} /> </div> ))} </div> );}