@ducor/react
Version:
admin template ui interface
56 lines (55 loc) • 2.06 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { createElement, forwardRef } from "react";
import { twMerge } from "tailwind-merge";
import { getGapClass } from "../helpers/helpers";
const GRID_COLUMNS = {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
4: "grid-cols-4",
5: "grid-cols-5",
6: "grid-cols-6",
7: "grid-cols-7",
8: "grid-cols-8",
9: "grid-cols-9",
10: "grid-cols-10",
11: "grid-cols-11",
12: "grid-cols-12",
};
const GRID_ROWS = {
1: "grid-rows-1",
2: "grid-rows-2",
3: "grid-rows-3",
4: "grid-rows-4",
5: "grid-rows-5",
6: "grid-rows-6",
7: "grid-rows-7",
8: "grid-rows-8",
9: "grid-rows-9",
10: "grid-rows-10",
11: "grid-rows-11",
12: "grid-rows-12",
};
const Grid = forwardRef((_a, ref) => {
var { children, columns = 1, rows, gap, className } = _a, props = __rest(_a, ["children", "columns", "rows", "gap", "className"]);
// Validate and clamp columns between 1-12
const validatedColumns = Math.min(Math.max(columns, 1), 12);
const gridColumnsClass = GRID_COLUMNS[validatedColumns] || "grid-cols-1";
// Validate and clamp rows between 1-12 if provided as number
const validatedRows = rows ? Math.min(Math.max(rows, 1), 12) : undefined;
const gridRowsClass = validatedRows ? GRID_ROWS[validatedRows] : undefined;
const gridClass = twMerge("grid", gridColumnsClass, gridRowsClass, getGapClass(gap), className);
return createElement("div", Object.assign({ className: gridClass, ref }, props), children);
});
Grid.displayName = "Grid";
export default Grid;