function MainComponent() { const [url, setUrl] = React.useState(''); const [downloadType, setDownloadType] = React.useState(''); const handleInputChange = (event)=>{ setUrl(event.target.value); }; const handleDownloadClick = (type)=>{ setDownloadType(type); if (url && (type === 'mp4' || type === 'mp3')) { // Logic to download video or audio } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f9f9f9] p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "YouTube ダウンローダー"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-[#d1d5db] py-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none", type: "text", placeholder: "YouTube URL を入力", "aria-label": "Full name", value: url, onChange: handleInputChange, __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "flex-shrink-0 bg-[#ff0000] text-white text-base py-2 px-4 rounded", type: "button", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4caf50] text-white font-semibold py-2 px-4 rounded inline-flex items-center", onClick: ()=>handleDownloadClick('mp4'), __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-video", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "MP4")), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-[#f44336] text-white font-semibold py-2 px-4 rounded inline-flex items-center", onClick: ()=>handleDownloadClick('mp3'), __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-audio", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "MP3")))); }