function MainComponent() { const [wallDimensions, setWallDimensions] = React.useState(''); const [muralDesign, setMuralDesign] = React.useState(null); const handleWallDimensionsChange = (event)=>{ setWallDimensions(event.target.value); }; const handleMuralDesignChange = (event)=>{ setMuralDesign(event.target.files[0]); }; const handleSubmit = (event)=>{ event.preventDefault(); console.log(wallDimensions, muralDesign); // Process the inputs to generate the grid with color codes }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[900px] mx-auto p-5", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-[#333] mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Mural Painting Assistant"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-5", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "wallDimensions", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Enter Wall Dimensions (HxW)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "wallDimensions", name: "wallDimensions", placeholder: "e.g., 8x10 feet", className: "border border-[#ccc] w-full p-3 rounded-md", value: wallDimensions, onChange: handleWallDimensionsChange, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "uploadImage", className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Upload the Mural Design"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "uploadImage", name: "uploadImage", className: "border border-[#ccc] w-full p-3 rounded-md", onChange: handleMuralDesignChange, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white py-3 px-6 rounded-md hover:bg-[#0056b3] transition duration-200", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Process Image"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center text-[#333] mb-5", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Instructions"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Tape the corners of the wall based on the dimensions provided."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Take a clear scan of the entire wall with the app."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Review the generated grid with color codes."), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Follow the grid and color codes to paint your mural.")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, ` body { background-color: #f0f0f0; font-family: font-roboto; } `)); }