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:
parent
1e614c2ba5
commit
8018b3fa73
2 changed files with 16 additions and 2 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue