30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import { AlertTriangle, TrendingUp, Users, DollarSign, Shield } from "lucide-react";
|
|
|
|
export default function AttentionCard({ icon: Icon, label, value, sublabel, severity = "normal", onClick }) {
|
|
const colorMap = {
|
|
critical: "border-red-200 bg-red-50 text-red-700",
|
|
high: "border-orange-200 bg-orange-50 text-orange-700",
|
|
medium: "border-yellow-200 bg-yellow-50 text-yellow-700",
|
|
normal: "border-slate-200 bg-white text-slate-700",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`text-left p-4 rounded-xl border-2 transition-all hover:shadow-md ${colorMap[severity]} ${onClick ? "cursor-pointer hover:border-slate-300" : "cursor-default"}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-1">
|
|
<Icon className="w-4 h-4 opacity-70" />
|
|
{severity !== "normal" && (
|
|
<span className={`text-[9px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-full ${colorMap[severity]}`}>
|
|
{severity}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-2xl font-black leading-none">{value}</p>
|
|
<p className="text-[11px] mt-1 opacity-80">{label}</p>
|
|
{sublabel && <p className="text-[10px] mt-0.5 opacity-60">{sublabel}</p>}
|
|
</button>
|
|
);
|
|
} |