42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import clsx from "clsx";
|
|
import styles from "./StatusCard.module.css";
|
|
import { LucideIcon } from "lucide-react";
|
|
|
|
interface StatusCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
icon: LucideIcon;
|
|
status?: "success" | "warning" | "error" | "neutral";
|
|
trend?: string;
|
|
href?: string;
|
|
}
|
|
|
|
import Link from "next/link";
|
|
|
|
export function StatusCard({ label, value, icon: Icon, status = "neutral", trend, href }: StatusCardProps) {
|
|
const content = (
|
|
<div className={clsx(styles.card, href && styles.clickable)}>
|
|
<div className={styles.header}>
|
|
<span className={styles.label}>{label}</span>
|
|
<div className={clsx(styles.iconWrapper, styles[status])}>
|
|
<Icon size={20} />
|
|
</div>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.value}>{value}</div>
|
|
{trend && <div className={styles.trend}>{trend}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} style={{ textDecoration: 'none' }}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|