mirror of
https://github.com/mudler/LocalAI.git
synced 2026-06-18 21:58:58 -04:00
feat(ui): StatusPill primitive + time-of-day greeting helper
Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
@@ -8120,3 +8120,17 @@ select.input {
|
||||
.console-rail.console-rail--enter { animation: none; }
|
||||
.console-rail .nav-item:hover:not(.active) { transform: none; }
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.status-pill__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-text-muted); flex-shrink: 0; }
|
||||
.status-pill--success .status-pill__dot { background: var(--color-success); }
|
||||
.status-pill--warning .status-pill__dot { background: var(--color-warning); }
|
||||
.status-pill--error .status-pill__dot { background: var(--color-error); }
|
||||
.status-pill--info .status-pill__dot { background: var(--color-info); }
|
||||
.status-pill--muted .status-pill__dot { background: var(--color-text-muted); }
|
||||
|
||||
21
core/http/react-ui/src/components/StatusPill.jsx
Normal file
21
core/http/react-ui/src/components/StatusPill.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// Single source for status visuals. Maps a semantic status to a token-driven
|
||||
// dot + label. Replaces per-page hex status maps over time.
|
||||
const STATUS = {
|
||||
healthy: 'success',
|
||||
online: 'success',
|
||||
warning: 'warning',
|
||||
draining: 'warning',
|
||||
error: 'error',
|
||||
unhealthy: 'error',
|
||||
loading: 'info',
|
||||
idle: 'muted',
|
||||
}
|
||||
export default function StatusPill({ status, label, className = '' }) {
|
||||
const tone = STATUS[status] || 'muted'
|
||||
return (
|
||||
<span className={`status-pill status-pill--${tone} ${className}`.trim()}>
|
||||
<span className="status-pill__dot" aria-hidden="true" />
|
||||
{label != null ? label : status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
9
core/http/react-ui/src/utils/greeting.js
vendored
Normal file
9
core/http/react-ui/src/utils/greeting.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
// Pure time-of-day bucket for the editorial home greeting.
|
||||
// Returns an i18n key suffix; caller resolves t(`greeting.${key}`).
|
||||
export function greetingKey(date = new Date()) {
|
||||
const h = date.getHours()
|
||||
if (h < 5) return 'night'
|
||||
if (h < 12) return 'morning'
|
||||
if (h < 18) return 'afternoon'
|
||||
return 'evening'
|
||||
}
|
||||
Reference in New Issue
Block a user