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

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

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