refactor(frontend): extract reusable hooks and page helper modules

2026-10-12 12:16:37 +08:00 · 2026-02-19 05:14:11 +00:00
parent 6d57b49595
commit c5124a01e6
24 changed files with 2072 additions and 0 deletions
@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+
+import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
+
+interface MetricCardProps {
+  title: string;
+  value: string | number;
+  iconClassName: string;
+  icon: ReactNode;
+  bottomContent?: ReactNode;
+}
+
+export const MetricCard = ({
+  title,
+  value,
+  iconClassName,
+  icon,
+  bottomContent,
+}: MetricCardProps) => {
+  return (
+    <Card className="border border-gray-200 dark:border-default-200 shadow-md hover:shadow-lg transition-shadow">
+      <CardBody className="p-3 lg:p-4">
+        <div className="flex flex-col space-y-2">
+          <div className="flex items-center justify-between">
+            <p className="text-xs lg:text-sm text-default-600 truncate">
+              {title}
+            </p>
+            <div
+              className={`p-1.5 lg:p-2 rounded-lg flex-shrink-0 ${iconClassName}`}
+            >
+              {icon}
+            </div>
+          </div>
+          <p className="text-base lg:text-xl font-bold text-foreground truncate">
+            {value}
+          </p>
+          {bottomContent}
+        </div>
+      </CardBody>
+    </Card>
+  );
+};