square-grid

1import { cn } from "@/lib/utils";
2 
3const SQUARE_GRID_BLOCKS = ["█", "▓", "▒"] as const;
4 
5type SquareGridProps = React.ComponentProps<"span"> & {
6  blocks?: readonly string[];
7  size?: number;
8  track?: string;
9};
10 
11function SquareGrid({
12  className,
13  blocks = SQUARE_GRID_BLOCKS,
14  size = 5,
15  track = "░",
16  style,
17  ...props
18}: SquareGridProps) {
19  const cells = Math.max(2, Math.floor(size));
20  const glyphs = SQUARE_GRID_BLOCKS.map(
21    (_, index) => blocks[index] ?? SQUARE_GRID_BLOCKS[index],
22  );
23  const gridCells = Array.from({ length: cells * cells }, (_, index) => {
24    const row = Math.floor(index / cells);
25    const col = index % cells;
26 
27    return row === 0 || row === cells - 1 || col === 0 || col === cells - 1
28      ? track
29      : " ";
30  });
31 
32  return (
33    <>
34      <style>{`
35        @keyframes loading-ui-square-grid {
36          0%,
37          100% {
38            transform: translate(0, 0);
39          }
40 
41          25% {
42            transform: translate(var(--loader-x), 0);
43          }
44 
45          50% {
46            transform: translate(var(--loader-x), var(--loader-y));
47          }
48 
49          75% {
50            transform: translate(0, var(--loader-y));
51          }
52        }
53      `}</style>
54      <span
55        role="status"
56        className={cn(
57          "relative inline-flex h-[var(--loader-size)] w-[var(--loader-size)] overflow-hidden font-mono text-xl leading-none text-current select-none",
58          className,
59        )}
60        style={
61          {
62            "--loader-size": `${cells}ch`,
63            "--loader-x": `${cells - 1}ch`,
64            "--loader-y": `${cells - 1}ch`,
65            ...style,
66          } as React.CSSProperties
67        }
68        {...props}
69      >
70        <span
71          aria-hidden="true"
72          className="pointer-events-none absolute inset-0 grid"
73          style={{
74            gridTemplateColumns: `repeat(${cells}, 1ch)`,
75            gridTemplateRows: `repeat(${cells}, 1ch)`,
76          }}
77        >
78          {gridCells.map((glyph, index) => (
79            <span
80              key={index}
81              className="flex h-[1ch] w-[1ch] items-center justify-center"
82            >
83              {glyph}
84            </span>
85          ))}
86        </span>
87        {glyphs.map((glyph, index) => (
88          <span
89            key={`${glyph}-${index}`}
90            aria-hidden="true"
91            className={cn(
92              "pointer-events-none absolute top-0 left-0 flex h-[1ch] w-[1ch] items-center justify-center",
93// … truncated