function ConvertButton({ onClick, label }) { return /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-blue-500 text-white font-roboto rounded-md hover:bg-blue-600", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function ConvertButtonStory() { const handleConvert = ()=>{ console.log('Conversion triggered'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ConvertButton, { onClick: handleConvert, label: "Convert", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function YouTubeToAudioConverter({ onConvert, downloadLink }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-[#333] mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "YouTube to .wav or .flac Converter"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md w-full max-w-[500px]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "youtubeUrl", className: "block text-[#333] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "YouTube Video URL"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "youtubeUrl", name: "youtubeUrl", className: "w-full p-2 border border-gray-300 rounded-md mb-4", placeholder: "Enter YouTube video URL", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileFormat", className: "block text-[#333] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Output format"), /*#__PURE__*/ React.createElement("select", { id: "fileFormat", name: "fileFormat", className: "w-full p-2 border border-gray-300 rounded-md mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "wav", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, ".wav"), /*#__PURE__*/ React.createElement("option", { value: "flac", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, ".flac")), /*#__PURE__*/ React.createElement(ConvertButton, { onClick: onConvert, label: "Convert", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "downloadSection", className: `mt-6 ${downloadLink ? 'block' : 'hidden'}`, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: downloadLink, id: "downloadLink", className: "bg-green-500 text-white font-roboto p-3 rounded-md hover:bg-green-600", download: true, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Download File"))); } function YouTubeToAudioConverterStory() { const [downloadLink, setDownloadLink] = React.useState(null); async function handleConvert() { const youtubeUrl = document.getElementById('youtubeUrl').value; const fileFormat = document.getElementById('fileFormat').value; const response = await fetch('/api/convert', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: youtubeUrl, format: fileFormat }) }); const data = await response.json(); setDownloadLink(data.downloadUrl); } return /*#__PURE__*/ React.createElement(YouTubeToAudioConverter, { onConvert: handleConvert, downloadLink: downloadLink, __source: { fileName: "", lineNumber: 59, columnNumber: 10 }, __self: this }); } function MainComponent() { const [downloadLink, setDownloadLink] = React.useState(null); async function handleConvert() { const youtubeUrl = document.getElementById('youtubeUrl').value; const fileFormat = document.getElementById('fileFormat').value; const response = await fetch('/api/convert', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: youtubeUrl, format: fileFormat }) }); const data = await response.json(); setDownloadLink(data.downloadUrl); } return /*#__PURE__*/ React.createElement(YouTubeToAudioConverter, { onConvert: handleConvert, downloadLink: downloadLink, __source: { fileName: "", lineNumber: 21, columnNumber: 10 }, __self: this }); }