phx-react
Version:
PHX REACT
57 lines • 1.65 kB
JavaScript
import React from 'react';
export function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
const gapClasses = {
2: 'gap-2',
3: 'gap-3',
4: 'gap-4',
6: 'gap-6',
8: 'gap-8',
12: 'gap-12',
};
const gapXClasses = {
2: 'gap-x-2',
3: 'gap-x-3',
4: 'gap-x-4',
6: 'gap-x-6',
8: 'gap-x-8',
12: 'gap-x-12',
};
const gapYClasses = {
2: 'gap-y-2',
3: 'gap-y-3',
4: 'gap-y-4',
6: 'gap-y-6',
8: 'gap-y-8',
12: 'gap-y-12',
};
export const PHXTwoColumnLayout = ({ className = '', left, responsive = {
gapX: 4,
gapY: 2,
md: {
cols: 3,
leftSpan: 2,
rightSpan: 1,
},
}, right, }) => {
const { gap = 4, gapX, gapY, ...bpConfigs } = responsive;
const bpClasses = [];
const leftClasses = [];
const rightClasses = [];
for (const bp of Object.keys(bpConfigs)) {
const conf = bpConfigs[bp];
if (!conf)
continue;
if (conf.cols)
bpClasses.push(`${bp}:grid-cols-${conf.cols}`);
if (conf.leftSpan)
leftClasses.push(`${bp}:col-span-${conf.leftSpan}`);
if (conf.rightSpan)
rightClasses.push(`${bp}:col-span-${conf.rightSpan}`);
}
return (React.createElement("div", { className: classNames('grid grid-cols-1', gapClasses[gap], gapX && gapXClasses[gapX], gapY && gapYClasses[gapY], ...bpClasses, className) },
React.createElement("div", { className: classNames(...leftClasses) }, left),
React.createElement("div", { className: classNames(...rightClasses) }, right)));
};
//# sourceMappingURL=TwoColumnLayout.js.map