function MainComponent() { const [comments, setComments] = React.useState([]); async function handleSubmit(event) { event.preventDefault(); const videoUrl = event.target.elements['videoUrl'].value; const response = await fetch('/api/youtube-comments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ videoUrl }) }); const result = await response.json(); setComments(result.comments); } function downloadCSV() { const csvContent = "data:text/csv;charset=utf-8," + comments.map((e)=>e.join(",")).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "youtube_comments.csv"); document.body.appendChild(link); link.click(); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-crimson-text mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "YouTubeコメントエクスポートサービス"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-lg bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "videoUrl", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "YouTube動画のURLを入力:"), /*#__PURE__*/ React.createElement("input", { id: "videoUrl", name: "videoUrl", type: "url", className: "shadow-lg appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "https://www.youtube.com/watch?v=...", required: true, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "コメント取得"))), comments.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "コメント一覧"), /*#__PURE__*/ React.createElement("button", { onClick: downloadCSV, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "CSVとしてダウンロード"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, comments.map((comment, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, comment))))); }