xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
24 lines (23 loc) • 2.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';
import { Panel, PanelGroup, PanelResizeHandle, } from 'react-resizable-panels';
const ResizableBentoCard = ({ children, defaultWidth = 300, defaultHeight = 200, minWidth = 150, minHeight = 150, maxWidth = 800, maxHeight = 600, isResizable = import.meta.env.DEV, // Resizable only in dev
}) => {
if (!isResizable) {
return (_jsx("div", { style: { width: defaultWidth, height: defaultHeight }, className: "bg-white rounded-2xl shadow p-4 overflow-auto", children: children }));
}
const resizableProps = {
width: defaultWidth,
height: defaultHeight,
minConstraints: [minWidth, minHeight],
maxConstraints: [maxWidth, maxHeight],
resizeHandles: ['se'],
};
return (_jsx(ResizableBox, { ...resizableProps, children: _jsx("div", { className: "w-full h-full bg-white rounded-2xl shadow p-4 overflow-auto", children: children }) }));
};
const ResizableBentoLayout = () => {
return (_jsxs(PanelGroup, { direction: "horizontal", className: "h-screen w-full", children: [_jsx(Panel, { defaultSize: 20, minSize: 10, className: "bg-white p-4 rounded-xl shadow overflow-auto", children: _jsx("p", { children: "\uD83D\uDCDA Left Sidebar" }) }), _jsx(PanelResizeHandle, { className: "w-1 bg-gray-300 hover:bg-gray-400 transition-colors cursor-col-resize" }), _jsx(Panel, { children: _jsxs(PanelGroup, { direction: "vertical", children: [_jsx(Panel, { defaultSize: 40, minSize: 20, className: "bg-white p-4 rounded-xl shadow overflow-auto", children: _jsx("p", { children: "\uD83D\uDCCA Top Panel" }) }), _jsx(PanelResizeHandle, { className: "h-1 bg-gray-300 hover:bg-gray-400 transition-colors cursor-row-resize" }), _jsx(Panel, { children: _jsxs(PanelGroup, { direction: "horizontal", children: [_jsx(Panel, { defaultSize: 50, className: "bg-white p-4 rounded-xl shadow overflow-auto", children: _jsx("p", { children: "\uD83E\uDDE9 Inner Left" }) }), _jsx(PanelResizeHandle, { className: "w-1 bg-gray-300 hover:bg-gray-400 transition-colors cursor-col-resize" }), _jsx(Panel, { defaultSize: 50, className: "bg-white p-4 rounded-xl shadow overflow-auto", children: _jsx("p", { children: "\uD83D\uDEE0\uFE0F Inner Right" }) })] }) })] }) }), _jsx(PanelResizeHandle, { className: "w-1 bg-gray-300 hover:bg-gray-400 transition-colors cursor-col-resize" }), _jsx(Panel, { defaultSize: 20, minSize: 10, className: "bg-white p-4 rounded-xl shadow overflow-auto", children: _jsx("p", { children: "\uD83D\uDCE6 Right Sidebar" }) })] }));
};
export default ResizableBentoCard;
export { ResizableBentoLayout };