function MainComponent() { const [selectedType, setSelectedType] = React.useState(""); const [surface, setSurface] = React.useState(0); const [total, setTotal] = React.useState(0); const calculateTotal = (e)=>{ e.preventDefault(); let pricePerSquareMeter = 0; switch(selectedType){ case "parquet": case "pvc": case "moquette": pricePerSquareMeter = 18; break; case "carrelage": pricePerSquareMeter = 15; break; case "ciment": pricePerSquareMeter = 10; break; default: } setTotal(surface * pricePerSquareMeter); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: calculateTotal, className: "p-8 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "floorType", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Type de sol"), /*#__PURE__*/ React.createElement("select", { id: "floorType", name: "floorType", value: selectedType, onChange: (e)=>setSelectedType(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Sélectionner une option"), /*#__PURE__*/ React.createElement("option", { value: "parquet", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Parquet"), /*#__PURE__*/ React.createElement("option", { value: "pvc", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "PVC"), /*#__PURE__*/ React.createElement("option", { value: "moquette", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Moquette"), /*#__PURE__*/ React.createElement("option", { value: "carrelage", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Carrelage"), /*#__PURE__*/ React.createElement("option", { value: "ciment", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Ciment"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "surface", className: "block text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Surface en m²"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "surface", name: "surface", value: surface, onChange: (e)=>setSurface(Number(e.target.value)), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Calculer")), total > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Total à payer : ", /*#__PURE__*/ React.createElement("span", { className: "text-blue-500", __source: { fileName: "", lineNumber: 61, columnNumber: 78 }, __self: this }, total), " €"))); }