function TripFocusInputField({ name, placeholder, value, onChange }) { return /*#__PURE__*/ React.createElement("textarea", { name: name, className: "font-roboto shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: placeholder, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TripFocusInputFieldStory() { const [formData, setFormData] = React.useState({ focusAreas: '' }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TripFocusInputField, { name: "focusAreas", placeholder: "e.g., ancient ruins, weird history, olive oil, wine", value: formData.focusAreas, onChange: handleChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = React.useState({ destination: '', startDate: '', endDate: '', activities: '', focusAreas: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = ()=>{ console.log(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#E0F7FA] min-h-screen p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl mt-6 mb-4 text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Mediterranean Summer Trip Planner"), /*#__PURE__*/ React.createElement("img", { src: "./mediterranean.jpg", alt: "Beautiful beach in the Mediterranean", className: "w-[600px] h-[400px] object-cover mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white p-6 rounded-lg shadow-md", onSubmit: (e)=>{ e.preventDefault(); handleSubmit(); }, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-gray-700 text-sm font-bold mb-2", htmlFor: "destination", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Destination"), /*#__PURE__*/ React.createElement("input", { name: "destination", className: "font-roboto shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "destination", type: "text", placeholder: "Enter destination", value: formData.destination, onChange: handleChange, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-gray-700 text-sm font-bold mb-2", htmlFor: "startDate", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("input", { name: "startDate", className: "font-roboto shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "startDate", type: "date", value: formData.startDate, onChange: handleChange, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-gray-700 text-sm font-bold mb-2", htmlFor: "endDate", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "End Date"), /*#__PURE__*/ React.createElement("input", { name: "endDate", className: "font-roboto shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "endDate", type: "date", value: formData.endDate, onChange: handleChange, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-gray-700 text-sm font-bold mb-2", htmlFor: "activities", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Activities"), /*#__PURE__*/ React.createElement("textarea", { name: "activities", className: "font-roboto shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "activities", placeholder: "List activities you plan to do", value: formData.activities, onChange: handleChange, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-gray-700 text-sm font-bold mb-2", htmlFor: "focusAreas", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Focus Areas"), /*#__PURE__*/ React.createElement(TripFocusInputField, { name: "focusAreas", placeholder: "e.g., ancient ruins, weird history, olive oil, wine", value: formData.focusAreas, onChange: handleChange, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Plan My Trip"))); }