function MainComponent() { const [videoUrl, setVideoUrl] = React.useState(''); const [summary, setSummary] = React.useState(''); const [error, setError] = React.useState(''); const summarizeVideo = async (e)=>{ e.preventDefault(); setError(''); const videoId = videoUrl.split("v=")[1]?.split("&")[0]; if (!videoId) { setError('Invalid URL. Please check and try again.'); return; } const apiUrl = `https://api.example.com/summarize?videoId=${videoId}`; try { const response = await fetch(apiUrl); if (!response.ok) throw new Error('Summary could not be fetched.'); const data = await response.json(); setSummary(data.summary); } catch (error) { console.error(error); setError('Error fetching summary, please try again.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f9f9f9] p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "YouTube動画要約ツール"), /*#__PURE__*/ React.createElement("form", { onSubmit: summarizeVideo, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoUrl", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "動画のURL"), /*#__PURE__*/ React.createElement("input", { type: "url", id: "videoUrl", name: "videoUrl", className: "mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", placeholder: "例: https://www.youtube.com/watch?v=dQw4w9WgXcQ", required: true, value: videoUrl, onChange: (e)=>setVideoUrl(e.target.value), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500", __source: { fileName: "", lineNumber: 39, columnNumber: 23 }, __self: this }, error)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#FF0000] hover:bg-[#cc0000] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#cc0000]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "要約する")), summary && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, summary)))); }