function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(null); const handleSearch = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch('/integrations/google-search/search?q=Music+recognition+2000s+Australia+Christmas', { method: 'GET' }); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } else { setError('Failed to fetch search results'); } } catch (err) { setError('An error occurred while fetching search results'); } finally{ setIsLoading(false); } }; const handleFileUpload = (event)=>{ const file = event.target.files[0]; if (file) { console.log('File uploaded:', file.name); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Music Recognition - 2000s Australia Christmas"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Upload Audio File"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", onChange: handleFileUpload, className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "w-full md:w-auto px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Search for Music Recognition Info"), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, "Loading..."), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, error), searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b pb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, result.title)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, result.snippet)))))); }