feat(ui): add theme-aware stats and finance carousel

2026-07-17 21:56:52 +03:00
parent cb2ed90046
commit 49c4c370c8
7 changed files with 253 additions and 161 deletions
@@ -0,0 +1,72 @@
+import type { LucideIcon } from "lucide-react";
+import { Card, CardContent } from "poyraz-ui/atoms";
+
+import { cn } from "@/lib/utils";
+
+export type StatCardTone =
+  | "primary"
+  | "green"
+  | "blue"
+  | "amber"
+  | "red"
+  | "rose";
+
+const iconToneClasses: Record<StatCardTone, string> = {
+  primary: "bg-primary/10 text-primary",
+  green: "bg-success text-success-icon",
+  blue: "bg-info text-info-icon",
+  amber: "bg-warning text-warning-icon",
+  red: "bg-destructive-muted text-destructive-muted-foreground",
+  rose: "bg-destructive-muted text-destructive-muted-foreground",
+};
+
+type StatCardProps = {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  tone?: StatCardTone;
+  description?: string;
+  featured?: boolean;
+  className?: string;
+};
+
+export function StatCard({
+  label,
+  value,
+  icon: Icon,
+  tone = "primary",
+  description,
+  featured = false,
+  className,
+}: StatCardProps) {
+  return (
+    <Card
+      className={cn(
+        "h-full",
+        featured && "border-primary/30 bg-primary/[0.025] shadow-sm",
+        className,
+      )}
+    >
+      <CardContent className="flex h-full items-center justify-between gap-3 p-4">
+        <div className="min-w-0">
+          <p className="text-sm text-muted-foreground">{label}</p>
+          <p className="mt-1 truncate text-2xl font-semibold text-foreground">
+            {value}
+          </p>
+          {description ? (
+            <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        <div
+          aria-hidden="true"
+          className={cn(
+            "flex h-10 w-10 shrink-0 items-center justify-center rounded-sm",
+            iconToneClasses[tone],
+          )}
+        >
+          <Icon className="h-5 w-5" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}