Grid

1"use client";
2import * as React from "react";
3import { cn } from "@/registry/optics/lib/utils";
4import { Plus } from "lucide-react";
5 
6// Crear el contexto
7const GridContext = React.createContext(null);
8 
9// Hook para usar el contexto
10const useGridContext = () => {
11	const context = React.useContext(GridContext);
12	if (!context) {
13		throw new Error("GridRow y GridItem deben estar dentro de GridContainer");
14	}
15	return context;
16};
17 
18// Provider que envuelve el container
19export const GridContainer = ({
20	cols = 12,
21	rows = 1,
22	gap = 0,
23	border = true,
24	className = "",
25	children = null,
26	...props
27}) => {
28	const contextValue = {
29		cols,
30		rows,
31		gap,
32		border,
33		...props,
34	};
35 
36	return (
37		<GridContext.Provider value={contextValue}>
38			<div
39				className={cn(`w-full grid`, className)}
40				style={{
41					gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
42					gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
43					gap,
44				}}
45				{...props}
46			>
47				{children}
48			</div>
49		</GridContext.Provider>
50	);
51};
52 
53export const GridRow = ({
54	className = "",
55	children = null,
56	span: paramSpan = 0,
57	gap: paramGap = 0,
58	overrideStyles = false,
59	borderTop = true,
60	borderBottom = true,
61	...props
62}) => {
63	const { cols, gap: containerGap, border } = useGridContext();
64	const gap = paramGap || containerGap;
65	const span = paramSpan || cols;
66 
67	return (
68		<div
69			className={cn(
70				`w-full grid border-t last:border-b -mb-[1px] s`,
71				gap > 0 && "!border-b -mb-0",
72				!border && "!border-0",
73				!borderTop && "!border-t-0",
74				!borderBottom && "!border-b-0",
75				className,
76			)}
77			style={
78				overrideStyles
79					? undefined
80					: {
81							gridColumn: `span ${cols} / span ${span}`,
82							gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
83							gap,
84						}
85			}
86			{...props}
87		>
88			{children}
89		</div>
90	);
91};
92 
93export const GridItem = ({
94	className = "",
95	children = null,
96	span = 1,
97	borderLeft = true,
98	borderRight = true,
99	borderTop = false,
100	borderBottom = false,
101	decorationTopLeft = false,
102	decorationTopRight = false,
103	decorationBottomLeft = false,
104	decorationBottomRight = false,
105	...props
106}) => {
107	const { cols, border } = useGridContext();
108	const hasDecorations =
109		decorationTopLeft ||
110		decorationTopRight ||
111		decorationBottomLeft ||
112		decorationBottomRight;
113 
114	return (
115		<div
116			className={cn(
117				`border-l last:border-r flex items-center justify-center relative`,
118				// Aspect square solo en desktop para evitar elementos muy pequeños en mobile
119// … truncated