Files
flotilla/src/app/components/RelayItem.svelte
T
2024-10-03 11:49:52 -07:00

41 lines
1.3 KiB
Svelte

<script lang="ts">
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import {displayUrl} from '@welshman/lib'
import {displayRelayUrl} from '@welshman/util'
import {deriveRelay} from '@welshman/app'
export let url
const relay = deriveRelay(url)
$: connections = $relay?.stats?.connect_count || 0
</script>
<div class="card2 card2-sm bg-alt column gap-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon="remote-controller-minimalistic" />
{displayRelayUrl(url)}
</div>
<slot />
</div>
{#if $relay?.profile?.description}
<p>{$relay?.profile.description}</p>
{/if}
<span class="flex items-center gap-1 text-sm">
{#if $relay?.profile?.contact}
<Link external class="underline" href={$relay.profile.contact}
>{displayUrl($relay.profile.contact)}</Link>
&bull;
{/if}
{#if $relay?.profile?.supported_nips}
<span class="cursor-pointer underline tooltip" data-tip="NIPs supported: {$relay.profile.supported_nips.join(", ")}">
{$relay.profile.supported_nips.length} NIPs
</span>
&bull;
{/if}
Connected {connections} {connections === 1 ? 'time' : 'times'}
</span>
</div>