feat: redesign admin panel with Lucide icons and modern styling
- Add lucide-react for SVG icons throughout the admin - Redesign sidebar with gradient background, icons per nav item, and sticky layout - Redesign topbar with cleaner user info display - Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed - Update AdminNavLink with icon support and new active state styling - Improve table styling in admin-page CSS (rounded corners, hover, spacing) - Clean up unused admin CSS
This commit is contained in:
1 parent
bd299be55d
commit
cf287dbc8b
9 files changed
+278
-261
No files matched your search
@@ -25,26 +25,20 @@ export function StatusCard({
|
||||
value: ReactNode;
|
||||
hint?: string;
|
||||
state?: State;
|
||||
icon?: string;
|
||||
icon?: ReactNode;
|
||||
}) {
|
||||
const borderColor =
|
||||
state === "ok" ? "border-l-green-600" :
|
||||
state === "warn" ? "border-l-[var(--color-primary)]" :
|
||||
state === "danger" ? "border-l-red-500" :
|
||||
"border-l-[var(--color-text-muted)]";
|
||||
|
||||
return (
|
||||
<div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
|
||||
<div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
|
||||
<div className="flex items-center justify-between gap-3 mb-3">
|
||||
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
|
||||
{icon ? (
|
||||
<span className="text-lg leading-none" aria-hidden>
|
||||
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
|
||||
{hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
|
||||
<div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
|
||||
{hint ? <div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user