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

My Account Route #3

Merged
ditorodev merged 7 commits from riobuenoDevelops/my-account into develop 2024-03-14 15:43:54 +00:00
Conversation 0 Commits 7 Files Changed 12 +12 -7
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ff74a98e24 - Show all commits

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>
) )
} }