melabidi/carmanagement
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

unfied style

Browse Source
This commit is contained in:
root
2026-05-23 04:35:47 -04:00
parent fd10d0db6a
commit 07fba16ff2
57 changed files with 565 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/components/ui/StatCard.tsx
+9 -9
View File
@@ -16,8 +16,8 @@ export default function StatCard({
change,
vsLastMonthLabel = 'vs last month',
icon: Icon,
iconColor = 'text-blue-600',
iconBg = 'bg-blue-50',
iconColor = 'text-amber-700 dark:text-amber-300',
iconBg = 'bg-amber-50 dark:bg-amber-950/30',
}: StatCardProps) {
const isPositive = change !== undefined && change >= 0
const isNegative = change !== undefined && change < 0
@@ -26,24 +26,24 @@ export default function StatCard({
<div className="card p-6">
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-slate-500 font-medium">{title}</p>
<p className="text-2xl font-bold text-slate-900 mt-1">{value}</p>
<p className="text-sm font-medium text-stone-500 dark:text-stone-400">{title}</p>
<p className="mt-1 text-2xl font-bold text-stone-950 dark:text-stone-50">{value}</p>
{change !== undefined && (
<div className="flex items-center gap-1 mt-2">
<div className="mt-2 flex items-center gap-1">
<span
className={[
'text-xs font-medium',
isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-slate-500',
isPositive ? 'text-emerald-600 dark:text-emerald-300' : isNegative ? 'text-red-600 dark:text-red-300' : 'text-stone-500 dark:text-stone-400',
].join(' ')}
>
{isPositive ? '+' : ''}{change.toFixed(1)}%
</span>
<span className="text-xs text-slate-400">{vsLastMonthLabel}</span>
<span className="text-xs text-stone-400 dark:text-stone-500">{vsLastMonthLabel}</span>
</div>
)}
</div>
<div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center flex-shrink-0`}>
<Icon className={`w-6 h-6 ${iconColor}`} />
<div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-[1.25rem] ${iconBg}`}>
<Icon className={`h-6 w-6 ${iconColor}`} />
</div>
</div>
</div>