function YouTubeToMp3Converter({ onSubmit, children }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 p-4 min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "YouTube to MP3 Converter"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-full max-w-lg", onSubmit: onSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "youtubeURL", className: "block font-roboto mb-2 text-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "YouTube URL:"), /*#__PURE__*/ React.createElement("input", { type: "url", id: "youtubeURL", name: "youtubeURL", className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "Enter YouTube video link", required: true, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), children), /*#__PURE__*/ React.createElement("div", { className: "mt-6 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Paste a YouTube video URL above to start the conversion to MP3."))); } function YouTubeToMp3ConverterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YouTubeToMp3Converter, { onSubmit: ()=>alert('Form submitted!'), __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ConvertToMp3Button, { onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); } function ConvertToMp3Button({ onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Convert to MP3"); } function ConvertToMp3ButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ConvertToMp3Button, { onClick: ()=>alert('Form submitted!'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = (e)=>{ e.preventDefault(); const url = e.target.youtubeURL.value; if (url) { console.log(`URL to be converted: ${url}`); } }; return /*#__PURE__*/ React.createElement(YouTubeToMp3Converter, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ConvertToMp3Button, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); }