function DrawingToolbar({ onSelectTool, onSelectColor }) { const tools = [ { name: "pencil", icon: "fas fa-pencil-alt" }, { name: "brush", icon: "fas fa-paint-brush" }, { name: "eraser", icon: "fas fa-eraser" }, { name: "shapes", icon: "fas fa-shapes" }, { name: "text", icon: "fas fa-font" } ]; const grayscaleSwatches = [ "bg-gray-500", "bg-gray-600", "bg-gray-700" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, tools.map((tool)=>/*#__PURE__*/ React.createElement("i", { key: tool.name, className: `${tool.icon} text-blue-500`, onClick: ()=>onSelectTool(tool.name), __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", name: "color-picker", className: "w-8 h-8", onChange: (e)=>onSelectColor(e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex flex-col space-y-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, grayscaleSwatches.map((swatch, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-8 h-8 ${swatch}`, onClick: ()=>onSelectColor(swatch), __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }))))); } function DrawingToolbarStory() { const handleSelectTool = (toolName)=>{ console.log("Selected tool:", toolName); }; const handleSelectColor = (color)=>{ console.log("Selected color:", color); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingToolbar, { onSelectTool: handleSelectTool, onSelectColor: handleSelectColor, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center bg-gray-800 text-white px-4 py-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save text-blue-500", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "comic-options", className: "bg-gray-800 text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "storyboard", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Storyboard"), /*#__PURE__*/ React.createElement("option", { value: "character-design", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Character Design"), /*#__PURE__*/ React.createElement("option", { value: "dialogue", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Dialogue")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 sm:w-16 lg:w-20 bg-gray-700 hover:w-full transition-all duration-300 overflow-hidden", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-eraser", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-shapes", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-font", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", name: "color-picker", className: "w-8 h-8", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-500", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-600", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-gray-100 flex justify-center items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 w-full h-full max-w-[1000px] max-h-[800px] bg-white text-[#000000bf]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-12 sm:w-16 lg:w-20 bg-gray-700 hover:w-full transition-all duration-300 overflow-hidden", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-layer-group", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-sliders-h", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-500", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-600", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })))))); }