function StartLocationInputField({ id, name, placeholder, required = false }) { return /*#__PURE__*/ React.createElement("input", { type: "text", id: id, name: name, placeholder: placeholder, className: "w-full p-2 text-sm border rounded-lg focus:ring-blue-500 focus:border-blue-500", required: required, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StartLocationInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StartLocationInputField, { id: "start-location", name: "startLocation", placeholder: "Enter start location", required: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [route, setRoute] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const startLocation = formData.get('startLocation'); const destination = formData.get('destination'); setRoute(`Best route from ${startLocation} to ${destination} is calculated.`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-2xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "GPS Route Finder"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "destination", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Destination"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "destination", name: "destination", className: "w-full p-2 text-sm border rounded-lg focus:ring-blue-500 focus:border-blue-500", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Find Best Route"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center mt-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, route), /*#__PURE__*/ React.createElement("span", { className: "block w-48 h-48", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "🗺️"))); }