function MainComponent({ onLogin, onRegister, onUpload, metadata, onMetadataChange, coverArtImage, onCoverImageChange, platforms }) { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#f4f4f4] min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onLogin, className: "bg-blue-500 text-white px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("button", { onClick: onRegister, className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mt-4 mb-8", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Apple Spot Music Distribution"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Cover Art Image"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "coverArtImage", onChange: onCoverImageChange, className: "w-full mt-1 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), coverArtImage && /*#__PURE__*/ React.createElement("img", { src: coverArtImage, alt: "Cover Art Preview", className: "mt-4 w-32 h-32 object-cover", __source: { fileName: "", lineNumber: 14, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Music File"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "musicFile", onChange: onUpload, className: "w-full mt-1 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Metadata"), /*#__PURE__*/ React.createElement("textarea", { name: "metadata", value: metadata, onChange: onMetadataChange, className: "w-full mt-1 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-6 mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Share Your Music"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, platforms.map((platform)=>/*#__PURE__*/ React.createElement("a", { key: platform.name, href: platform.link, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center p-4 border rounded transition hover:bg-gray-100", style: { backgroundColor: platform.bgColor }, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: platform.icon + " text-white text-2xl", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })))))); } function StoryComponent() { const platforms = [ { name: "YouTube", link: "https://www.youtube.com/upload", icon: "fab fa-youtube", bgColor: "#FF0000" }, { name: "SoundCloud", link: "https://soundcloud.com/upload", icon: "fab fa-soundcloud", bgColor: "#FF5500" }, { name: "TikTok", link: "https://www.tiktok.com/upload", icon: "fab fa-tiktok", bgColor: "#000000" }, { name: "Vimeo", link: "https://vimeo.com/upload", icon: "fab fa-vimeo-v", bgColor: "#1ab7ea" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onLogin: ()=>alert('Login Clicked'), onRegister: ()=>alert('Register Clicked'), onUpload: (event)=>alert(`Music File: ${event.target.files[0].name}`), coverArtImage: "/path/to/image.jpg", onCoverImageChange: (event)=>alert(`Cover Art: ${event.target.files[0].name}`), metadata: "Sample metadata text", onMetadataChange: (event)=>alert(`Metadata Changed: ${event.target.value}`), platforms: platforms, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); }