portal-dashboard/app/components/usage-card.tsx

35 lines
1.3 KiB
TypeScript
Raw Normal View History

import { AddIcon } from "./icons";
2024-03-12 20:22:54 +00:00
import { Button } from "./ui/button";
import { Progress } from "./ui/progress";
interface UsageCardProps {
label: string,
2024-03-12 20:22:54 +00:00
monthlyUsage: number, // Asumming that the minimium is 1GB
currentUsage: number,
icon: React.ReactNode
}
export const UsageCard = ({ label, monthlyUsage, currentUsage, icon }: UsageCardProps) => {
2024-03-12 20:22:54 +00:00
return (
<div className="p-8 border rounded-lg w-full">
<div className="flex items-center justify-between mb-8">
<div className="text-primary-2 text-sm">
<div className="flex items-center gap-x-2 text-lg font-bold text-white mb-2">
{icon}
{label}
2024-03-12 20:22:54 +00:00
</div>
Montly {label.toLocaleLowerCase()} limit is {monthlyUsage} GB
2024-03-12 20:22:54 +00:00
</div>
<Button className="gap-x-2 h-12">
<AddIcon />
Add More
</Button>
</div>
<Progress max={monthlyUsage} value={currentUsage} />
<div className="flex items-center justify-between mt-4 font-semibold text-sm">
2024-03-12 20:22:54 +00:00
<span className="text-primary-2">{currentUsage} GB used</span>
<span className="text-white">{monthlyUsage - currentUsage} GB left</span>
</div>
</div>
)
}