etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(admin-remnawave): причесать иконки в карточках статистики

Browse Source 
Локальный StatCard держал иконку в чипе p-2, который подстраивался под
размер иконки (а часть иконок передавалась без className) — отсюда разные
по размеру чипы и «кривые» иконки. Привёл к виду карточек статистики продаж:
лейбл сверху, фиксированный чип h-9 w-9 с принудительным размером иконки
([&>svg]:h-5 w-5 нормализует все иконки разом), значение в тон чипу. Рамку
и subValue сохранил.
This commit is contained in:
c0mrade
2026-06-02 21:15:33 +03:00
parent 488503b360
commit 7efe069be0
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/AdminRemnawave.tsx
View File

@@ -116,24 +116,33 @@ interface StatCardProps {
subValue?: string; subValue?: string;
} }
function StatCard({ label, value, icon, color = 'accent', subValue }: StatCardProps) { // Soulful chip + matching value colour, in the spirit of the sales-stats cards.
const colorClasses: Record<string, string> = { // Fixed-size chip + forced icon size normalises every icon regardless of what the
accent: 'bg-accent-500/20 text-accent-400', // call site passes (some omit a className) — that was the source of the misalignment.
green: 'bg-success-500/20 text-success-400', const STAT_TONE: Record<string, { chip: string; value: string }> = {
blue: 'bg-accent-500/20 text-accent-400', accent: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
orange: 'bg-warning-500/20 text-warning-400', green: { chip: 'bg-success-500/15 text-success-400', value: 'text-success-400' },
red: 'bg-error-500/20 text-error-400', blue: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
purple: 'bg-accent-500/20 text-accent-400', orange: { chip: 'bg-warning-500/15 text-warning-400', value: 'text-warning-400' },
red: { chip: 'bg-error-500/15 text-error-400', value: 'text-error-400' },
purple: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
}; };
function StatCard({ label, value, icon, color = 'accent', subValue }: StatCardProps) {
const tone = STAT_TONE[color] ?? STAT_TONE.accent;
return ( return (
<div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4"> <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4">
<div className="flex items-center gap-3"> <p className="truncate text-xs text-dark-400 sm:text-sm">{label}</p>
<div className={`rounded-lg p-2 ${colorClasses[color]}`}>{icon}</div> <div className="mt-1.5 flex items-center gap-2.5">
<span
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg [&>svg]:h-5 [&>svg]:w-5 ${tone.chip}`}
>
{icon}
</span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate text-xs text-dark-400">{label}</p> <div className={`truncate text-lg font-semibold sm:text-xl ${tone.value}`}>{value}</div>
<p className="text-lg font-semibold text-dark-100">{value}</p> {subValue && <div className="truncate text-xs text-dark-500">{subValue}</div>}
{subValue && <p className="text-xs text-dark-500">{subValue}</p>}
</div> </div>
</div> </div>
</div> </div>