function DrawingCanvasCompiler({ id }) { return /*#__PURE__*/ React.createElement("canvas", { id: id, className: "bg-white h-full w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function DrawingCanvasCompilerStory() { return /*#__PURE__*/ React.createElement("div", { className: "h-[400px] w-[400px] bg-gray-200", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingCanvasCompiler, { id: "drawingCanvas1", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] w-[200px] bg-gray-400 mt-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingCanvasCompiler, { id: "drawingCanvas2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }))); } function DagingApplication({ headline }) { return /*#__PURE__*/ React.createElement("h3", { className: "font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, headline); } function DagingApplicationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DagingApplication, { headline: "Drawing Application", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { React.useEffect(()=>{ const canvas = document.getElementById('drawingCanvas'); if (canvas) { const context = canvas.getContext('2d'); if (context) { context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height); } } }, []); return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-screen flex flex-col bg-gray-900", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-gray-800 text-white", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DagingApplication, { headline: "Drawing Application", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] bg-gray-700 p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-awesome fa-pencil-alt text-white", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("li", { className: "font-awesome fa-paint-brush text-white", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("li", { className: "font-awesome fa-eraser text-white", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("li", { className: "font-awesome fa-hand-pointer text-white", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "flex-grow bg-gray-600 p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingCanvasCompiler, { id: "drawingCanvas", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })))); }