function MainComponent() { const [cart, setCart] = React.useState([]); const [roomDimensions, setRoomDimensions] = React.useState({ length: '', width: '' }); const [contactDetails, setContactDetails] = React.useState({ name: '', email: '', phone: '' }); const [delivery, setDelivery] = React.useState(false); const [fitting, setFitting] = React.useState(false); const [stock] = React.useState([ { id: 1, name: 'Persian Red', imageUrl: '/carpets/persian-red.jpg', price: 120 }, { id: 2, name: 'Modern Gray', imageUrl: '/carpets/modern-gray.jpg', price: 140 }, { id: 3, name: 'Classic Beige', imageUrl: '/carpets/classic-beige.jpg', price: 110 } ]); const addToCart = (id)=>{ const item = stock.find((c)=>c.id === id); setCart((currentCart)=>[ ...currentCart, item ]); }; const handleRoomDimensionChange = (e)=>{ const { name, value } = e.target; setRoomDimensions((prevDimensions)=>({ ...prevDimensions, [name]: value })); }; const handleContactDetailsChange = (e)=>{ const { name, value } = e.target; setContactDetails((prevDetails)=>({ ...prevDetails, [name]: value })); }; const handleDeliveryChange = (e)=>{ setDelivery(e.target.checked); }; const handleFittingChange = (e)=>{ setFitting(e.target.checked); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#121212] mb-6 font-bold text-center", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Rawson's Carpets"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, stock.map((carpet)=>/*#__PURE__*/ React.createElement("div", { key: carpet.id, className: "border p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: carpet.imageUrl, alt: `Carpet design: ${carpet.name}`, className: "w-[200px] h-[200px] mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, carpet.name), /*#__PURE__*/ React.createElement("p", { className: "text-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "£", carpet.price), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#3665f3] text-white py-2 px-4", onClick: ()=>addToCart(carpet.id), __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Add to Cart")))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text text-[#121212] mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Your Cart"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, cart.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, item.name, " - £", item.price)))), /*#__PURE__*/ React.createElement("form", { className: "mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text text-[#121212] mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Room Dimensions (in meters)"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "length", placeholder: "Length", value: roomDimensions.length, onChange: handleRoomDimensionChange, className: "border p-2 mr-2 mb-2 flex-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "width", placeholder: "Width", value: roomDimensions.width, onChange: handleRoomDimensionChange, className: "border p-2 mb-2 flex-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-[#121212] mb-1", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: contactDetails.name, onChange: handleContactDetailsChange, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-[#121212] mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: contactDetails.email, onChange: handleContactDetailsChange, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-[#121212] mb-1", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: contactDetails.phone, onChange: handleContactDetailsChange, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "delivery", checked: delivery, onChange: handleDeliveryChange, className: "mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Delivery within 20km of Chesterfield")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "fitting", checked: fitting, onChange: handleFittingChange, className: "mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Carpet Fitting Option")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3665f3] text-white py-2 px-4", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "Submit Order"))); }