LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

feat: Allow usageCard button to be replaced for another one

This commit is contained in:
Tania Gutierrez 2024-03-13 21:50:32 -04:00
parent 988dab24d1
commit ff74a98e24
Signed by: riobuenoDevelops
GPG Key ID: 53133EB28EB7E801
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/usage-card.tsx
View File

@ -6,10 +6,11 @@ interface UsageCardProps {
label: string,
monthlyUsage: number, // Asumming that the minimium is 1GB
currentUsage: number,
icon: React.ReactNode
icon: React.ReactNode,
button?: React.ReactNode;
}
export const UsageCard = ({ label, monthlyUsage, currentUsage, icon }: UsageCardProps) => {
export const UsageCard = ({ label, monthlyUsage, currentUsage, icon, button }: UsageCardProps) => {
return (
<div className="p-8 border rounded-lg w-full">
<div className="flex items-center justify-between mb-8">
@ -20,10 +21,14 @@ export const UsageCard = ({ label, monthlyUsage, currentUsage, icon }: UsageCard
</div>
Montly {label.toLocaleLowerCase()} limit is {monthlyUsage} GB
</div>
<Button className="gap-x-2 h-12">
<AddIcon />
Add More
</Button>
{!button ? (
<Button className="gap-x-2 h-12">
<AddIcon />
Add More
</Button>
) : (
button
)}
</div>
<Progress max={monthlyUsage} value={currentUsage} />
<div className="flex items-center justify-between mt-4 font-semibold text-sm">