function MainComponent({ widgets }) { return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white shadow-2xl border border-gray-400 rounded-xl left-[220px] top-[120px] p-4 w-72", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Widgets"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, widgets.map((widget, index)=>{ const handleClick = ()=>{ alert(`Widget clicked: ${widget.name}`); }; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex flex-col items-center ${widget.bgColor} p-4 rounded-lg shadow-lg cursor-pointer`, onClick: handleClick, __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, widget.icon ? /*#__PURE__*/ React.createElement("div", { className: `mb-2 ${widget.textColor || 'text-white'}`, __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, widget.icon) : /*#__PURE__*/ React.createElement("div", { className: "mb-2 w-4 h-4", __source: { fileName: "", lineNumber: 20, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, widget.name)); })), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Presets"))); } function StoryComponent() { const widgets = [ { name: 'Text (T)', bgColor: 'bg-white', icon: 'T', textColor: 'text-black' }, { name: 'Picture', bgColor: 'bg-green-500' }, { name: 'Shape', bgColor: 'bg-yellow-500', icon: 'shape' }, { name: 'Video', bgColor: 'bg-blue-500', icon: 'video' }, { name: 'Shots', bgColor: 'bg-yellow-900', icon: 'shots' }, { name: 'Lottie', bgColor: 'bg-green-200', icon: 'lottie' }, { name: 'Slideshow', bgColor: 'bg-blue-900' }, { name: 'Button', bgColor: 'bg-red-500' }, { name: 'Hotspot', bgColor: 'bg-pink-300' }, { name: 'Form', bgColor: 'bg-purple-500' }, { name: 'E-comm', bgColor: 'bg-green-800' }, { name: 'Maps', bgColor: 'bg-orange-900' }, { name: 'Music', bgColor: 'bg-orange-500' }, { name: 'Code', bgColor: 'bg-gray-500' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { widgets: widgets, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); }