29 lines
1.1 KiB
JavaScript
29 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
export default function StatusCard({ status, count, percentage, color }) {
|
|
const colorClasses = {
|
|
blue: "from-[#0A39DF] to-[#0A39DF]/80",
|
|
purple: "from-purple-600 to-purple-700",
|
|
green: "from-emerald-600 to-emerald-700",
|
|
gray: "from-slate-600 to-slate-700",
|
|
yellow: "from-amber-500 to-amber-600"
|
|
};
|
|
|
|
return (
|
|
<Card className="p-6 bg-white border-slate-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-500 mb-2">{status}</p>
|
|
<div className={`w-14 h-14 bg-gradient-to-br ${colorClasses[color]} rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-md`}>
|
|
{count}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-[#1C323E]">{percentage}%</div>
|
|
<p className="text-xs text-slate-500 mt-1">of total</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |