added a nice text that shows if a service is public or private and if you can get access on request

This commit is contained in:
dvorakmortonxd 2026-05-19 10:53:29 +02:00
commit 8018b3fa73
2 changed files with 16 additions and 2 deletions

View file

@ -2,7 +2,7 @@
import React, { useEffect, useState, ReactNode } from 'react';
export default function ServiceButton({ url, checkUrl, className, icon, name, desc }: { url: string, checkUrl?: string, className: string, icon: ReactNode, name: string, desc: string }) {
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');
useEffect(() => {
@ -34,7 +34,12 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
}} title={status === 'up' ? 'Active' : status === 'down' ? 'Dead' : 'Checking...'} />
<span className="service-icon">{icon}</span>
<span className="service-text">
<span className="service-name">{name}</span>
<span className="service-name">
{name}
{access === 'public' && <span style={{ color: '#4ade80', fontSize: '0.7em', marginLeft: '6px' }}>(public)</span>}
{access === 'private' && <span style={{ color: '#ef4444', fontSize: '0.7em', marginLeft: '6px' }}>(private)</span>}
{access === 'on_request' && <span style={{ color: '#f97316', fontSize: '0.7em', marginLeft: '6px' }}>(on request)</span>}
</span>
<span className="service-desc">{desc}</span>
</span>
</a>