function MainComponent({ credits, maxCredits }) { const percentage = credits / maxCredits * 100; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "Credits Tracker"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, credits, " / ", maxCredits, " credits"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, percentage.toFixed(0), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${percentage}%` }, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), credits === 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-yellow-100 border border-yellow-400 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-yellow-700 font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "You're out of credits. Add more to continue using the service."))); } function MoreCredits() { return /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-100 border border-red-400 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-700 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "You're out of credits. Please add more credits to continue using the service."), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Add More Credits")); } function ActionButton({ type }) { const getButtonProps = ()=>{ switch(type){ case 'Discord': return { bgColor: 'bg-[#7289DA]', icon: 'fab fa-discord' }; case 'Notion': return { bgColor: 'bg-[#000000]', icon: 'fas fa-book' }; case 'Slack': return { bgColor: 'bg-[#4A154B]', icon: 'fab fa-slack' }; default: return { bgColor: 'bg-gray-500', icon: 'fas fa-question' }; } }; const { bgColor, icon } = getButtonProps(); return /*#__PURE__*/ React.createElement("button", { className: `${bgColor} text-white p-2 rounded-full hover:opacity-80 transition duration-300`, __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-lg`, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { credits: 750, maxCredits: 1000, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { credits: 250, maxCredits: 1000, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { credits: 1000, maxCredits: 1000, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { credits: 0, maxCredits: 1000, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MoreCredits, { __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ActionButton, { type: "Discord", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ActionButton, { type: "Notion", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(ActionButton, { type: "Slack", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }))); }