From a12fa3e6feedb3c7d83a097e187aa9945ff9bb10 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 8 Nov 2024 01:47:49 +0800
Subject: [PATCH] feat: add <UsageCard /> component which can render usage data
 and progress

---
 src/client/components/UsageCard.tsx | 61 +++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/client/components/UsageCard.tsx

diff --git a/src/client/components/UsageCard.tsx b/src/client/components/UsageCard.tsx
new file mode 100644
index 0000000..704b75e
--- /dev/null
+++ b/src/client/components/UsageCard.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card, CardContent, CardHeader } from './ui/card';
+import { formatNumber } from '@/utils/common';
+import { LuAlertCircle } from 'react-icons/lu';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { useTranslation } from '@i18next-toolkit/react';
+import colors from 'tailwindcss/colors';
+
+interface UsageCardProps {
+  title: string;
+  current: number;
+  limit?: number;
+}
+export const UsageCard: React.FC<UsageCardProps> = React.memo((props) => {
+  const { title, current, limit } = props;
+  const { t } = useTranslation();
+
+  return (
+    <Card className="relative h-full w-full overflow-hidden">
+      {limit && (
+        <div
+          className="absolute h-full bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10"
+          style={{ width: `${(current / limit) * 100}%` }}
+        />
+      )}
+
+      {limit && current > limit && (
+        <div className="absolute right-2 top-2">
+          <Tooltip>
+            <TooltipTrigger>
+              <LuAlertCircle stroke={colors.red['500']} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <div>
+                {t(
+                  'Exceeded the limit, please upgrade your plan or your workspace will be paused soon.'
+                )}
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
+      <CardHeader className="text-muted-foreground">{title}</CardHeader>
+      <CardContent>
+        {limit && limit >= 0 ? (
+          <div>
+            <span className="text-2xl font-bold">{formatNumber(current)}</span>{' '}
+            / <span>{formatNumber(limit)}</span>
+          </div>
+        ) : (
+          <div>
+            <span className="text-2xl font-bold">{formatNumber(current)}</span>{' '}
+            / <span>∞</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+});
+UsageCard.displayName = 'UsageCard';