function MainComponent() { const [wines, setWines] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(()=>{ fetchWines(); }, []); const fetchWines = async ()=>{ try { const response = await fetch('/api/wines'); // Assuming an API endpoint exists const data = await response.json(); setWines(data); setLoading(false); } catch (error) { console.error('Error fetching wines:', error); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-gray-900 mb-8 font-noto-sans-jp", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "日本Amazonワインランキング"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-gray-600", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow overflow-hidden sm:rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, wines.map((wine, index)=>/*#__PURE__*/ React.createElement("li", { key: wine.id, className: index !== 0 ? 'border-t border-gray-200' : '', __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:px-6 flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center text-lg font-bold text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 font-noto-sans-jp", __source: { fileName: "", lineNumber: 40, columnNumber: 21 }, __self: this }, wine.name), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-gray-500 font-noto-sans-jp", __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, "￥", wine.price.toLocaleString())), /*#__PURE__*/ React.createElement("a", { href: wine.amazonUrl, target: "_blank", rel: "noopener noreferrer", className: "ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-noto-sans-jp", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, "購入する"))))))); }