function MainComponent() { const signUpProviders = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4285F4] text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google mr-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), "Google"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#3b5998] text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f mr-2", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), "Facebook"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000000] text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-apple mr-2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }), "Apple")); const destinationInput = /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "destination", className: "border p-2 w-full rounded font-roboto", type: "text", placeholder: "Add your destination", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-blue-500 text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Add")); const destinationList = /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto flex justify-between mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Destination 1", /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { className: "text-red-500", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Delete"))), /*#__PURE__*/ React.createElement("li", { className: "font-roboto flex justify-between mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Destination 2", /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { className: "text-red-500", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Delete")))); const mapDisplay = /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { width: "100%", height: "100%", title: "Google Map", src: "https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY¢er=0,0&zoom=2", className: "border-0", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this })); const routeSharing = /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Share Route"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Public"), /*#__PURE__*/ React.createElement("input", { name: "shareSetting", type: "checkbox", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Route Planner"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Sign Up / Sign In"), signUpProviders), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Manage Destinations"), destinationInput, destinationList), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Route Creation"), mapDisplay, routeSharing)); }