function YoutubeSummaryTool({ youtubeLink, averageViews, medianViews, channelIcon, subscriberCount }) { const handleSubmit = (e)=>{ e.preventDefault(); // The function where you should calculate statistics based on youtubeLink }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Youtubeサマリーくん"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "p-2 border border-gray-300 rounded", placeholder: "Insert Youtube link here", name: "youtubeLink", value: youtubeLink, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-500 text-white rounded font-semibold", type: "submit", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Average Views: ", averageViews), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Median Views: ", medianViews), channelIcon && /*#__PURE__*/ React.createElement("img", { src: channelIcon, alt: "Channel Icon", className: "w-20 h-20 mx-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Subscriber Count: ", subscriberCount))); } function YoutubeSummaryToolStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YoutubeSummaryTool, { youtubeLink: "https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw", averageViews: 50000, medianViews: 75000, channelIcon: "path/to/channelIcon.png", subscriberCount: 120000, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent() { const [youtubeLink, setYoutubeLink] = React.useState(''); const [channelIcon, setChannelIcon] = React.useState(''); const [subscriberCount, setSubscriberCount] = React.useState('--'); const handleSubmit = async (e)=>{ e.preventDefault(); setChannelIcon('/path/to/icon.png'); // Simulate fetching channel icon setSubscriberCount('2M'); // Simulate fetching subscriber count }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-10", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-5 text-2xl font-bold", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Youtubeサマリーくん"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "youtubeLink", className: "mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "YouTube アカウントリンク"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "youtubeLink", value: youtubeLink, onChange: (e)=>setYoutubeLink(e.target.value), placeholder: "アカウントリンクを挿入", className: "mb-4 px-3 py-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-5 py-2 bg-blue-500 text-white rounded", type: "submit", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "抽出")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, channelIcon && /*#__PURE__*/ React.createElement("img", { src: channelIcon, alt: "チャンネルのアイコン", className: "w-20 h-20 mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "チャンネル登録者数: ", subscriberCount))); }