BLACK/HCI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add option to hide the progress bar for system statistics and introduce a success state for low usage values.

Browse Source
This commit is contained in:
BLACK
2026-01-18 20:35:59 +01:00
parent 774432b720
commit 2c10781d57
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@@ -67,7 +67,7 @@ export default function Dashboard() {
{ label: "CPU Auslastung", value: 45, displayValue: "45%" },
{ label: "RAM Nutzung", value: 32, displayValue: "2.5 GB / 8 GB" },
{ label: "Speicherplatz", value: 78, displayValue: "142 GB belegt" },
{ label: "System Laufzeit", value: 99, displayValue: "14t 2h 12m" }
{ label: "System Laufzeit", value: 99, displayValue: "14t 2h 12m", hideBar: true }
]} />
</div>
</div>

6
src/components/Dashboard/SystemStatsWidget.module.css
View File

@@ -61,10 +61,14 @@
transition: width 0.5s ease;
}
.progressFill.success {
background-color: var(--status-success);
}
.progressFill.high {
background-color: var(--status-warning);
}
.progressFill.critical {
background-color: var(--status-error);
}
}

22
src/components/Dashboard/SystemStatsWidget.tsx
View File

@@ -6,6 +6,7 @@ interface SystemStat {
label: string;
value: number; // 0 to 100
displayValue: string;
hideBar?: boolean;
}
interface SystemStatsWidgetProps {
@@ -26,15 +27,18 @@ export function SystemStatsWidget({ stats }: SystemStatsWidgetProps) {
<span>{stat.label}</span>
<span className={styles.statValue}>{stat.displayValue}</span>
</div>
<div className={styles.progressBar}>
<div
className={clsx(styles.progressFill, {
[styles.high]: stat.value > 70 && stat.value <= 90,
[styles.critical]: stat.value > 90,
})}
style={{ width: `${stat.value}%` }}
/>
</div>
{!stat.hideBar && (
<div className={styles.progressBar}>
<div
className={clsx(styles.progressFill, {
[styles.success]: stat.value <= 70,
[styles.high]: stat.value > 70 && stat.value <= 90,
[styles.critical]: stat.value > 90,
})}
style={{ width: `${stat.value}%` }}
/>
</div>
)}
</div>
))}
</div>