A downstream fork of Tranquil PDS for use in margin.cafe margin.cafe
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<script lang="ts"> interface Props { name: string | null uri?: string | null logo?: string | null heading?: boolean }
let { name, uri = null, logo = null, heading = false }: Props = $props()
let logoFailed = $state(false)
const host = $derived.by(() => { if (!uri) return null try { return new URL(uri).host } catch { return null } }) const label = $derived(name || host || '')</script>
<div class="client-badge"> {#if logo && !logoFailed} <span class="client-badge-mark" aria-hidden="true"> <img src={logo} alt="" width="40" height="40" onerror={() => logoFailed = true} /> </span> {/if} <span class="client-badge-text"> {#if heading} <h1 class="client-badge-name">{label}</h1> {:else} <strong class="client-badge-name">{label}</strong> {/if} {#if host && uri} <a class="client-badge-host" href={uri} target="_blank" rel="noopener noreferrer">{host}</a> {/if} </span></div>
<style> .client-badge { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.client-badge-mark { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-tertiary); box-shadow: inset 0 0 0 1px var(--border-color); }
.client-badge-mark img { width: 100%; height: 100%; object-fit: contain; }
.client-badge-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.client-badge-name { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-badge-host { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-badge-host:hover { color: var(--text-primary); text-decoration: underline; }</style>