phx-react
Version:
PHX REACT
17 lines • 1.26 kB
JavaScript
import React from 'react';
import { useResize } from './useResize';
import { classNames } from '../types';
export const PHXGridLayout = ({ children, className, col = 1, data = [], gap = 3, isCustomComponent = false, fitContent = false, }) => {
const width = useResize();
const gridColumns = fitContent ? `repeat(${col}, auto)` : `repeat(${col}, minmax(0, 1fr))`;
return (React.createElement("div", { className: classNames(className, fitContent ? 'w-fit' : '') },
React.createElement("div", { className: 'grid sm:grid-cols-2 md:grid-cols-3', style: width < 1024
? { gap: `${4 * gap}px` }
: {
gridTemplateColumns: gridColumns,
gap: `${4 * gap}px`,
} }, isCustomComponent ? (React.createElement(React.Fragment, null, children)) : (React.createElement(React.Fragment, null, data.map((item, index) => (React.createElement("div", { key: index + 1, className: 'flex flex-col gap-y-1' },
React.createElement("div", { className: 'text-xs leading-5 text-gray-600' }, item.title),
React.createElement("div", { className: 'text-xs font-semibold leading-[1.2rem] text-gray-900' }, item.content)))))))));
};
//# sourceMappingURL=GridLayout.js.map