function GoogleMapsDataTitle({ title }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function GoogleMapsDataTitleStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GoogleMapsDataTitle, { title: "Google Maps Data Scraper", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = async (event)=>{ event.preventDefault(); const location = event.target.elements.location.value; const response = await fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${location}&key=YOUR_API_KEY`); const data = await response.json(); console.log(data); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 p-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Google Maps Data Scraper")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow w-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-[400px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "location", className: "block text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Enter Location:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "location", name: "location", className: "w-full border border-gray-400 p-2 rounded", placeholder: "e.g., New York City", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white font-roboto p-2 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Scrape Data"))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-blue-600 p-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "© 2023 Data Scraper Inc."))); }