emarref.net
A daily game
1import { cva } from "class-variance-authority";
2import { PropsWithChildren } from "react";
3
4const caption = cva("flex justify-center text-2xl", {
5 variants: {
6 orientation: {
7 vertical: "grid-rows-subgrid row-start-3 -row-end-3 flex-col",
8 horizontal: "grid-cols-subgrid col-start-3 -col-end-3",
9 },
10 position: {
11 left: "col-start-1",
12 top: "row-start-1",
13 right: "-col-start-1",
14 bottom: "-row-start-1",
15 },
16 },
17});
18
19interface Props {
20 position: "left" | "top" | "right" | "bottom";
21}
22
23export function VariantCaption({
24 position,
25 children,
26}: PropsWithChildren<Props>) {
27 const orientation = ["top", "bottom"].includes(position)
28 ? "horizontal"
29 : "vertical";
30 return <div className={caption({ position, orientation })}>{children}</div>;
31}