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