69 lines
2.0 KiB
Svelte
69 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import type {Snippet} from "svelte"
|
|
import {page} from "$app/stores"
|
|
import {goto} from "$app/navigation"
|
|
import {displayRelayUrl} from "@welshman/util"
|
|
import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import PageBar from "@lib/components/PageBar.svelte"
|
|
import RelayIcon from "@app/components/RelayIcon.svelte"
|
|
import {decodeRelay} from "@app/relays"
|
|
import {makeSpacePath} from "@app/routes"
|
|
|
|
interface Props {
|
|
back?: () => unknown
|
|
leading?: Snippet
|
|
title?: Snippet
|
|
action?: Snippet
|
|
hideRelay?: boolean
|
|
[key: string]: any
|
|
}
|
|
|
|
const {
|
|
back = () => goto(makeSpacePath(url)),
|
|
leading,
|
|
title,
|
|
action,
|
|
hideRelay = false,
|
|
...props
|
|
}: Props = $props()
|
|
|
|
const url = decodeRelay($page.params.relay!)
|
|
</script>
|
|
|
|
<PageBar {...props}>
|
|
<div class="flex gap-2" class:items-start={hideRelay} class:items-center={!hideRelay}>
|
|
<Button onclick={back} class={cx("shrink-0 md:hidden", hideRelay && "pt-0.5")}>
|
|
<Icon icon={ArrowLeft} size={7} />
|
|
</Button>
|
|
<div
|
|
class="flex min-w-0 grow justify-between gap-4"
|
|
class:items-start={hideRelay}
|
|
class:items-center={!hideRelay}>
|
|
<div class="flex min-w-0 flex-col gap-0.5">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
{#if !hideRelay}
|
|
<RelayIcon {url} size={5} class="shrink-0 rounded-full md:hidden" />
|
|
{/if}
|
|
<div class="hidden shrink-0 md:flex md:items-center">
|
|
{@render leading?.()}
|
|
</div>
|
|
<div class="min-w-0">
|
|
{@render title?.()}
|
|
</div>
|
|
</div>
|
|
{#if !hideRelay}
|
|
<div class="text-xs text-primary md:hidden">
|
|
{displayRelayUrl(url)}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
{@render action?.()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageBar>
|