function GifConversionButton({ isLoading, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-5 w-full bg-[#4F46E5] hover:bg-[#3730A3] text-white font-bold py-4 px-5 rounded-lg transition duration-300 ease-in-out", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isLoading ? '変換中...' : 'GIFに変換'); } function GifConversionButtonStory() { const [isLoading, setLoading] = React.useState(false); const handleClick = ()=>{ setLoading(true); setTimeout(()=>setLoading(false), 2000); // Simulate file conversion process }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GifConversionButton, { isLoading: isLoading, onClick: handleClick, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [file, setFile] = React.useState(null); const [convertedGif, setConvertedGif] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleFileChange = (event)=>{ setFile(event.target.files[0]); }; const convertToGif = async (event)=>{ event.preventDefault(); setIsLoading(true); const formData = new FormData(); formData.append('file', file); try { const response = await fetch('/convert/mp4-to-gif', { method: 'POST', body: formData }); const blob = await response.blob(); const gifUrl = URL.createObjectURL(blob); setConvertedGif(gifUrl); } catch (error) { setConvertedGif(''); alert('変換に失敗しました。もう一度お試しください。'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#333] mb-10", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, ".mp4からGIFへの変換"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-[600px] bg-white shadow-xl rounded-lg p-10", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full mb-8", onSubmit: convertToGif, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mp4File", className: "block text-xl font-roboto text-[#333] mb-3", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "MP4ファイルを選択"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "mp4File", name: "mp4File", onChange: handleFileChange, className: "w-full p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent", accept: "video/mp4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(GifConversionButton, { isLoading: isLoading, onClick: convertToGif, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), convertedGif && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[320px] mt-8", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: convertedGif, alt: "変換したGIF画像", className: "w-full h-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })))); }