function MainComponent({ downloadPercentage, errorMessage }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "YouTube to MP3 Converter"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Enter the video URL below to download the MP3 file.")), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-gray-500 py-2", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://app.create.xyz/app-builder?project=776250ca-8986-4859-9764-e965642d4650", target: "_blank", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __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 Video URL", "aria-label": "YouTube Video URL", name: "videoUrl", __source: { fileName: "", lineNumber: 10, columnNumber: 117 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "flex-shrink-0 bg-blue-500 hover:bg-blue-700 border-blue-500 hover:border-blue-700 text-sm border-4 text-white py-1 px-2 rounded", type: "button", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Download"))), downloadPercentage !== null && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mt-8", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-medium text-gray-700", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Download Progress: ", downloadPercentage, "%"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${downloadPercentage}%` }, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }))), errorMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-red-500", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, errorMessage))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { errorMessage: "An error occurred while downloading the file.", downloadPercentage: null, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { errorMessage: null, downloadPercentage: 45, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { errorMessage: null, downloadPercentage: 100, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); }