function MainComponent({ onBrushActivate, brushColor, brushSize, onClearAll, onUndo }) { const colors = [ 'Red', 'Yellow', 'Blue', 'Green' ]; const sizes = [ 5, 10, 15, 20 ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full h-full", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onBrushActivate, className: "mb-4 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "Brush"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, colors.map((color)=>/*#__PURE__*/ React.createElement("button", { key: color, className: `p-2 mx-1 bg-${color.toLowerCase()}-500 text-white rounded`, onClick: ()=>brushColor(color.toLowerCase()), __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, color))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, sizes.map((size)=>/*#__PURE__*/ React.createElement("button", { key: size, className: "p-2 mx-1 bg-gray-300 rounded", onClick: ()=>brushSize(size), __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, size, "px"))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onUndo, className: "p-2 bg-yellow-500 text-white rounded mx-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Undo"), /*#__PURE__*/ React.createElement("button", { onClick: onClearAll, className: "p-2 bg-red-500 text-white rounded mx-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Clear All")), /*#__PURE__*/ React.createElement("div", { className: "border relative w-[800px] h-[600px]", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Canvas Area")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, ` .brush-cursor { cursor: url('/brush-icon.png'), auto; } .highlighted { background-color: rgba(255, 0, 0, 0.5); } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onBrushActivate: ()=>{}, brushColor: ()=>{}, brushSize: ()=>{}, onClearAll: ()=>{}, onUndo: ()=>{}, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); }