function BlueSubmitButton({ type, onClick, text }) { return /*#__PURE__*/ React.createElement("button", { type: type, className: "bg-[#007BFF] hover:bg-[#0056b3] text-white font-medium rounded-lg px-6 py-3", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function BlueSubmitButtonStory() { const handleClick = ()=>alert("Button clicked"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueSubmitButton, { type: "button", onClick: handleClick, text: "Submit", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const [car, setCar] = React.useState({ model: '', engine: '', color: '#ffffff', features: { sunroof: false, navigation: false, autodrive: false } }); const handleChange = (event)=>{ const { name, value, type, checked } = event.target; if (type === "checkbox") { setCar((prevState)=>({ ...prevState, features: { ...prevState.features, [name]: checked } })); } else { setCar((prevState)=>({ ...prevState, [name]: value })); } }; const handleSubmit = (event)=>{ event.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#F5F5F5] flex flex-col items-center justify-center p-5", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Car Preference Survey"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "model", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "What type of car model do you prefer?"), /*#__PURE__*/ React.createElement("select", { name: "model", className: "w-full border border-gray-300 rounded-lg p-2", value: car.model, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "sedan", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Sedan"), /*#__PURE__*/ React.createElement("option", { value: "suv", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "SUV"), /*#__PURE__*/ React.createElement("option", { value: "coupe", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Coupe"), /*#__PURE__*/ React.createElement("option", { value: "sports", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Sports"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "engine", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Preferred engine type?"), /*#__PURE__*/ React.createElement("select", { name: "engine", className: "w-full border border-gray-300 rounded-lg p-2", value: car.engine, onChange: handleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "electric", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Electric"), /*#__PURE__*/ React.createElement("option", { value: "hybrid", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Hybrid"), /*#__PURE__*/ React.createElement("option", { value: "gasoline", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Gasoline"), /*#__PURE__*/ React.createElement("option", { value: "diesel", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Diesel"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "color", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "What's your preferred car color?"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "color", className: "w-16 h-16 border-none cursor-pointer", value: car.color, onChange: handleChange, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "features", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Select your preferred features:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "sunroof", name: "sunroof", value: "sunroof", checked: car.features.sunroof, onChange: handleChange, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "sunroof", className: "ml-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "Sunroof")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "navigation", name: "navigation", value: "navigation", checked: car.features.navigation, onChange: handleChange, __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "navigation", className: "ml-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "Navigation System")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "autodrive", name: "autodrive", value: "autodrive", checked: car.features.autodrive, onChange: handleChange, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "autodrive", className: "ml-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Autonomous Driving")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { opacity: car.model ? '1' : '0', transition: 'opacity 0.5s' }, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/car-silhouette.svg", alt: "Estimated car silhouette based on preferences", className: "w-[300px] h-[200px]", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })))); }