Stat Row

1"use client";
2 
3import {
4	ArrowDown01Icon,
5	ArrowRight01Icon,
6	ArrowUp01Icon,
7} from "@hugeicons/core-free-icons";
8import { HugeiconsIcon } from "@hugeicons/react";
9 
10export type StatRowProps = {
11	title: string;
12	value: string | number;
13	unit?: string;
14	trend?: "up" | "down" | "neutral";
15	trendLabel?: string;
16};
17 
18const TREND_STYLES: Record<string, { color: string }> = {
19	up: { color: "text-emerald-500 dark:text-emerald-400" },
20	down: { color: "text-red-500 dark:text-red-400" },
21	neutral: { color: "text-muted-foreground" },
22};
23 
24function TrendIcon({
25	trend,
26	className,
27}: {
28	trend: string;
29	className?: string;
30}) {
31	if (trend === "up")
32		return <HugeiconsIcon icon={ArrowUp01Icon} className={className} />;
33	if (trend === "down")
34		return <HugeiconsIcon icon={ArrowDown01Icon} className={className} />;
35	return <HugeiconsIcon icon={ArrowRight01Icon} className={className} />;
36}
37 
38export function StatRow(props: StatRowProps) {
39	const trendStyle = props.trend ? TREND_STYLES[props.trend] : null;
40	return (
41		<div className="rounded-2xl bg-card text-card-foreground border p-5 w-fit min-w-50 h-full flex flex-col justify-between gap-2">
42			<p className="text-xs text-muted-foreground truncate">{props.title}</p>
43			<div className="flex items-end gap-1.5">
44				<span className="text-4xl font-bold text-foreground leading-none">
45					{props.value}
46				</span>
47				{props.unit && (
48					<span className="text-sm text-muted-foreground mb-0.5">
49						{props.unit}
50					</span>
51				)}
52			</div>
53			<div className="h-4 flex items-center">
54				{trendStyle && props.trendLabel && props.trend ? (
55					<div className={`flex items-center gap-1 ${trendStyle.color}`}>
56						<TrendIcon
57							trend={props.trend}
58							className={`w-3.5 h-3.5 ${trendStyle.color}`}
59						/>
60						<span className="text-xs font-medium">{props.trendLabel}</span>
61					</div>
62				) : null}
63			</div>
64		</div>
65	);
66}