grid

1"use client"
2 
3import { ReactNode, SVGProps } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface GridProps {
8  /** Number of columns in the grid */
9  columns?: number
10  /** Number of rows in the grid */
11  rows?: number
12  /** Height of the grid container */
13  height?: string
14  /** Width of the grid container */
15  width?: string
16  /** Whether to show the plus icons at corners */
17  showPlusIcons?: boolean
18  /** Custom className for the grid container */
19  className?: string
20  /** Children to render inside the grid */
21  children?: ReactNode
22  /** ARIA label for accessibility */
23  "aria-label"?: string
24}
25 
26interface PlusIconProps extends SVGProps<SVGSVGElement> {
27  className?: string
28}
29 
30/**
31 * A flexible grid component with customizable columns, rows, and optional decorative plus icons.
32 *
33 * @param columns - Number of columns in the grid (default: 9)
34 * @param rows - Number of rows in the grid (default: 2)
35 * @param height - Height of the grid container (default: "h-24")
36 * @param width - Width of the grid container (default: "w-full")
37 * @param showPlusIcons - Whether to show decorative plus icons at corners (default: true)
38 * @param className - Additional CSS classes for the grid container
39 * @param children - Content to render inside the grid
40 * @param aria-label - ARIA label for accessibility
41 */
42export function Grid({
43  columns = 9,
44  rows = 2,
45  height = "h-24",
46  width = "w-full",
47  showPlusIcons = true,
48  className,
49  children,
50  "aria-label": ariaLabel,
51}: GridProps) {
52  const PlusIcon = ({ className: iconClassName, ...rest }: PlusIconProps) => {
53    return (
54      <svg
55        xmlns="http://www.w3.org/2000/svg"
56        fill="none"
57        viewBox="0 0 24 24"
58        width={24}
59        height={24}
60        strokeWidth="1"
61        stroke="currentColor"
62        aria-hidden="true"
63        {...rest}
64        className={cn(
65          "absolute size-6 text-black dark:text-white",
66          iconClassName
67        )}
68      >
69        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
70      </svg>
71    )
72  }
73 
74  const totalItems = columns * rows
75 
76  // Generate grid items if no children provided
77  const gridItems =
78    children ||
79    Array.from({ length: totalItems }, (_, i) => {
80      const isLastInRow = (i + 1) % columns === 0
81      const isLastRow = i >= totalItems - columns
82 
83      return (
84        <span
85          key={i}
86          className={cn(
87            "h-full w-full",
88            !isLastInRow && "border-r",
89// … truncated