function TrackNameInputField({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, className: "mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm font-crimson-text", placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TrackNameInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TrackNameInputField, { name: "trackName", placeholder: "Enter track name", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent({ bgColor, spinnerColor }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Track Name"), /*#__PURE__*/ React.createElement(TrackNameInputField, { name: "trackName", placeholder: "Enter track name", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Upload Track"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "trackFile", className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 font-crimson-text", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Cover Art"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "coverArt", className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 font-crimson-text", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Background Color"), /*#__PURE__*/ React.createElement("select", { name: "bgColor", className: "block w-full p-2 border border-gray-300 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "bg-red-500", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Red"), /*#__PURE__*/ React.createElement("option", { value: "bg-blue-500", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Blue"), /*#__PURE__*/ React.createElement("option", { value: "bg-green-500", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Green"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Spinner Color"), /*#__PURE__*/ React.createElement("select", { name: "spinnerColor", className: "block w-full p-2 border border-gray-300 rounded-md font-crimson-text", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "bg-yellow-500", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Yellow"), /*#__PURE__*/ React.createElement("option", { value: "bg-purple-500", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Purple"), /*#__PURE__*/ React.createElement("option", { value: "bg-pink-500", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Pink")))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 font-crimson-text", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Upload Track")), /*#__PURE__*/ React.createElement("div", { className: `mt-6 relative w-[200px] h-[200px] ${bgColor} rounded-full flex items-center justify-center`, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute w-[50px] h-[50px] ${spinnerColor} rounded-full`, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { bgColor: "bg-blue-500", spinnerColor: "bg-yellow-500", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { bgColor: "bg-green-500", spinnerColor: "bg-purple-500", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }