toes/src/client/components/Urls.tsx

43 lines
996 B
TypeScript

import { buildAppUrl } from '../../shared/urls'
import { apps } from '../state'
import {
EmptyState,
StatusDot,
UrlLeft,
UrlLink,
UrlList,
UrlPort,
UrlRow,
} from '../styles'
export function Urls() {
const nonTools = apps.filter(a => !a.tool)
if (nonTools.length === 0) {
return <EmptyState>No apps installed</EmptyState>
}
return (
<UrlList>
{nonTools.map(app => {
const url = buildAppUrl(app.name, location.origin)
const running = app.state === 'running'
return (
<UrlRow key={app.name}>
<UrlLeft>
<StatusDot state={app.state} />
{running ? (
<UrlLink href={url} target="_blank">{url}</UrlLink>
) : (
<span style={{ color: 'var(--colors-textFaint)' }}>{app.name}</span>
)}
</UrlLeft>
{app.port ? <UrlPort>:{app.port}</UrlPort> : null}
</UrlRow>
)
})}
</UrlList>
)
}