dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

small changes regarding my proxmox maintenance checks

Browse source
This commit is contained in:
Martin Dvořák 2026-09-21 00:02:54 +02:00
commit cadbe8caa9
15 changed files with 149 additions and 483 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/components/ServiceButton.tsx
View file

@ -2,10 +2,16 @@
import React, { useEffect, useState, ReactNode } from 'react';
export default function ServiceButton({ url, checkUrl, className, icon, name, desc, access }: { url: string, checkUrl?: string, className: string, icon: ReactNode, name: string, desc: string, access?: 'public' | 'private' | 'on_request' }) {
const [status, setStatus] = useState<'pending' | 'up' | 'down'>('pending');
export default function ServiceButton({ url, checkUrl, className, icon, name, desc, access, disabled }: { url: string, checkUrl?: string, className: string, icon: ReactNode, name: string, desc: string, access?: 'public' | 'private' | 'on_request', disabled?: boolean }) {
const [status, setStatus] = useState<'pending' | 'up' | 'down'>(disabled ? 'up' : 'pending');
useEffect(() => {
// Disabled buttons are decorative: skip the health check and stay green.
if (disabled) {
setStatus('up');
return;
}
const checkStatus = async () => {
try {
const targetUrl = checkUrl || url;
@ -17,22 +23,15 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
}
};
checkStatus();
}, [url, checkUrl]);
}, [url, checkUrl, disabled]);
const statusColor = status === 'up' ? '#4ade80' : status === 'down' ? '#ef4444' : '#9ca3af';
const statusGlow = status === 'up' ? 'rgba(74, 222, 128, 0.9)' : status === 'down' ? 'rgba(239, 68, 68, 0.9)' : 'transparent';
const statusLabel = status === 'up' ? 'Active' : status === 'down' ? 'Dead' : 'Checking...';
const isFriend = className === 'friend';
return (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={`service-button ${className}`}
style={{ position: 'relative', '--status-color': statusColor, '--status-glow': statusGlow } as React.CSSProperties}
title={statusLabel}
>
const content = (
<>
<span className="service-icon-wrap">
{isFriend && <span className="service-status-dot" />}
<span className="service-icon">{icon}</span>
@ -46,6 +45,39 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
</span>
<span className="service-desc">{desc}</span>
</span>
</>
);
const sharedStyle = {
position: 'relative',
'--status-color': statusColor,
'--status-glow': statusGlow,
...(disabled ? { cursor: 'default' } : {}),
} as React.CSSProperties;
if (disabled) {
return (
<span
className={`service-button ${className} disabled`}
style={sharedStyle}
title={statusLabel}
aria-disabled="true"
>
{content}
</span>
);
}
return (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={`service-button ${className}`}
style={sharedStyle}
title={statusLabel}
>
{content}
</a>
);
}