function NewComponent({ handleSubmit, url, setUrl, quality, setQuality, qualities, location, setLocation }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "YouTube to MP3 Converter"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block mb-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "YouTube Video URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", id: "url", value: url, onChange: (e)=>setUrl(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Paste YouTube URL here", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quality", className: "block mb-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Audio Quality"), /*#__PURE__*/ React.createElement("select", { name: "quality", id: "quality", value: quality, onChange: (e)=>setQuality(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, qualities.map((quality)=>/*#__PURE__*/ React.createElement("option", { key: quality, value: quality, __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, quality)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "location", className: "block mb-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Save Location"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", id: "location", value: location, onChange: (e)=>setLocation(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Choose location to save MP3", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Download MP3")))); } function NewComponentStory() { const [url, setUrl] = React.useState(''); const [quality, setQuality] = React.useState('high'); const [location, setLocation] = React.useState(''); const qualities = [ 'high', 'medium', 'low' ]; const handleSubmit = (e)=>{ e.preventDefault(); // handle form submission }; return /*#__PURE__*/ React.createElement(NewComponent, { handleSubmit: handleSubmit, url: url, setUrl: setUrl, quality: quality, setQuality: setQuality, qualities: qualities, location: location, setLocation: setLocation, __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }); } function MainComponent() { const [url, setUrl] = React.useState(''); const [quality, setQuality] = React.useState('Medium'); const [location, setLocation] = React.useState(''); const qualities = [ 'Low', 'Medium', 'High' ]; const handleSubmit = (e)=>{ e.preventDefault(); const downloadData = { url, quality, location }; console.log(downloadData); }; return /*#__PURE__*/ React.createElement(NewComponent, { handleSubmit: handleSubmit, url: url, setUrl: setUrl, quality: quality, setQuality: setQuality, qualities: qualities, location: location, setLocation: setLocation, __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }); }