Pepe44DEV/Papo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: vollständiges Dashboard-Redesign mit HeroUI - monolithische App.tsx aufgelöst, 16 Seiten, Context-API, collapsible Sidebar, neues Dashboard-Layout
Some checks failed
Deploy Discord Bot / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Pepe44DEV
2026-07-01 06:15:56 +02:00
parent ccaf7bd4d2
commit e2d8002bf2
29 changed files with 2776 additions and 1296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/shared/StatCard.tsx
View File

@@ -4,18 +4,27 @@ import type { ReactNode } from 'react';
type Props = {
icon: ReactNode;
label: string;
value: string;
value: string | number;
trend?: string;
color?: 'primary' | 'success' | 'warning' | 'danger' | 'default';
};
export function StatCard({ icon, label, value }: Props) {
export function StatCard({ icon, label, value, trend, color = 'primary' }: Props) {
return (
<Card className="border border-default-100 bg-default-50/20">
<Card className="border border-default-100 bg-gradient-to-br from-default-50/20 to-background hover:border-default-200 transition-all">
<CardContent className="flex flex-col gap-2 p-4">
<div className="flex items-center gap-2 text-tiny uppercase tracking-widest text-default-500">
<span className="text-primary-400">{icon}</span>
{label}
<div className="flex items-center justify-between">
<div className={`flex size-9 items-center justify-center rounded-xl bg-${color}-500/10 text-${color}-400`}>
{icon}
</div>
{trend && (
<span className={`text-tiny font-medium ${trend.startsWith('+') ? 'text-success-400' : trend.startsWith('-') ? 'text-danger-400' : 'text-default-400'}`}>
{trend}
</span>
)}
</div>
<div className="text-2xl font-bold tracking-tight">{value}</div>
<div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
</CardContent>
</Card>
);