function MainComponent({ url, qualityOptions }) { const [inputValue, setInputValue] = React.useState(url); const [selectedQuality, setSelectedQuality] = React.useState(qualityOptions[0]); const [progress, setProgress] = React.useState(0); const qualitySelect = qualityOptions.map((option, index)=>({ key: index, value: option, label: option })); const handleChange = (e)=>{ setInputValue(e.target.value); }; const handleQualityChange = (e)=>{ setSelectedQuality(e.target.value); }; const handleDownload = ()=>{ if (!inputValue) return; setProgress(0); const fakeDownload = setInterval(()=>{ setProgress((prev)=>{ if (prev >= 100) { clearInterval(fakeDownload); setTimeout(()=>{ alert('ダウンロードが完了しました！'); }, 500); return 100; } return prev + 10; }); }, 200); }; return /*#__PURE__*/ React.createElement("div", { className: "container max-w-[600px] bg-white p-8 mx-auto my-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 font-arial", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "インスタライブ動画ダウンローダー"), /*#__PURE__*/ React.createElement("form", { id: "download-form", className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-arial", htmlFor: "video-url", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "動画のURLを入力してください："), /*#__PURE__*/ React.createElement("input", { type: "text", id: "video-url", name: "video-url", className: "w-full p-2 mb-4 border border-gray-300 rounded-md font-arial", value: inputValue, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-arial", htmlFor: "quality", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "画質を選んでください："), /*#__PURE__*/ React.createElement("select", { id: "quality", name: "quality", className: "w-full p-2 mb-4 border border-gray-300 rounded-md font-arial", value: selectedQuality, onChange: handleQualityChange, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, qualitySelect.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.key, value: option.value, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, option.label))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full p-2 bg-[#28a745] text-white rounded-md font-arial cursor-pointer hover:bg-[#218838]", onClick: handleDownload, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "ダウンロード")), /*#__PURE__*/ React.createElement("div", { id: "progress-container", className: progress > 0 ? "block" : "hidden", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-arial", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "ダウンロード中：", /*#__PURE__*/ React.createElement("span", { id: "progress-percent", __source: { fileName: "", lineNumber: 79, columnNumber: 43 }, __self: this }, progress), "%"), /*#__PURE__*/ React.createElement("progress", { id: "progress-bar", value: progress, max: "100", className: "w-full", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const qualityOptions = [ '1080p', '720p', '480p', '360p', '240p' ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f4f4f4] text-[#333] text-center p-4 min-h-screen", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { url: "https://instagram.com/example_video", qualityOptions: qualityOptions, __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { url: "", qualityOptions: qualityOptions, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); }