"use client" import { ReactNode, SVGProps } from "react" import { cn } from "@/lib/utils" interface GridProps { /** Number of columns in the grid */ columns?: number /** Number of rows in the grid */ rows?: number /** Height of the grid container */ height?: string /** Width of the grid container */ width?: string /** Whether to show the plus icons at corners */ showPlusIcons?: boolean /** Custom className for the grid container */ className?: string /** Children to render inside the grid */ children?: ReactNode /** ARIA label for accessibility */ "aria-label"?: string } interface PlusIconProps extends SVGProps { className?: string } /** * A flexible grid component with customizable columns, rows, and optional decorative plus icons. * * @param columns - Number of columns in the grid (default: 9) * @param rows - Number of rows in the grid (default: 2) * @param height - Height of the grid container (default: "h-24") * @param width - Width of the grid container (default: "w-full") * @param showPlusIcons - Whether to show decorative plus icons at corners (default: true) * @param className - Additional CSS classes for the grid container * @param children - Content to render inside the grid * @param aria-label - ARIA label for accessibility */ export function Grid({ columns = 9, rows = 2, height = "h-24", width = "w-full", showPlusIcons = true, className, children, "aria-label": ariaLabel, }: GridProps) { const PlusIcon = ({ className: iconClassName, ...rest }: PlusIconProps) => { return ( ) } const totalItems = columns * rows // Generate grid items if no children provided const gridItems = children || Array.from({ length: totalItems }, (_, i) => { const isLastInRow = (i + 1) % columns === 0 const isLastRow = i >= totalItems - columns return ( ) }) return (

{showPlusIcons && ( <> )} {gridItems}

) } // Legacy component for backward compatibility export function GridDemo() { return } export default Grid

grid

Instalação

Dependências

Registry dependencies