59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
|
import { Button } from "./ui/button";
|
||
|
|
import { Progress } from "./ui/progress";
|
||
|
|
|
||
|
|
interface UsageCardProps {
|
||
|
|
usageName: string,
|
||
|
|
monthlyUsage: number, // Asumming that the minimium is 1GB
|
||
|
|
currentUsage: number,
|
||
|
|
icon: React.ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
export const UsageCard = ({ usageName, monthlyUsage, currentUsage, icon }: UsageCardProps) => {
|
||
|
|
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}
|
||
|
|
{usageName}
|
||
|
|
</div>
|
||
|
|
Montly {usageName.toLocaleLowerCase()} limit is {monthlyUsage} GB
|
||
|
|
</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-bold text-sm">
|
||
|
|
<span className="text-primary-2">{currentUsage} GB used</span>
|
||
|
|
<span className="text-white">{monthlyUsage - currentUsage} GB left</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const AddIcon = ({ className }: { className?: string }) => {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
width="18"
|
||
|
|
height="18"
|
||
|
|
viewBox="0 0 18 18"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
className={className}
|
||
|
|
>
|
||
|
|
<g clipPath="url(#clip0_323_1258)">
|
||
|
|
<path
|
||
|
|
d="M9 1.5C4.85625 1.5 1.5 4.85625 1.5 9C1.5 13.1438 4.85625 16.5 9 16.5C13.1438 16.5 16.5 13.1438 16.5 9C16.5 4.85625 13.1438 1.5 9 1.5ZM12.75 9.75H9.75V12.75H8.25V9.75H5.25V8.25H8.25V5.25H9.75V8.25H12.75V9.75Z"
|
||
|
|
fill="currentColor"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<clipPath id="clip0_323_1258">
|
||
|
|
<rect width="18" height="18" fill="currentColor" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
};
|