42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Card } from "@heroui/react";
|
|
|
|
type MetricIndicatorProps = {
|
|
title: string;
|
|
value: ReactNode;
|
|
hint?: ReactNode;
|
|
footer?: ReactNode;
|
|
icon?: ReactNode;
|
|
color?: string;
|
|
valueClassName?: string;
|
|
};
|
|
|
|
export default function MetricIndicator({
|
|
title,
|
|
value,
|
|
hint,
|
|
footer,
|
|
icon,
|
|
color = "border-border",
|
|
valueClassName = "text-xl font-semibold text-foreground tabular-nums",
|
|
}: MetricIndicatorProps) {
|
|
return (
|
|
<Card className={`border-t-2 ${color}`}>
|
|
<Card.Content className="flex flex-col gap-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-xs text-muted">{title}</p>
|
|
{icon}
|
|
</div>
|
|
<p className={valueClassName}>{value}</p>
|
|
{footer ? (
|
|
<div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
|
|
{footer}
|
|
</div>
|
|
) : (
|
|
hint && <div className="text-xs text-muted">{hint}</div>
|
|
)}
|
|
</Card.Content>
|
|
</Card>
|
|
);
|
|
}
|