45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
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 {decodeRelay} from "@app/core/state"
|
|
import {makeSpacePath} from "@app/util/routes"
|
|
|
|
interface Props {
|
|
back?: () => unknown
|
|
title?: Snippet
|
|
action?: Snippet
|
|
[key: string]: any
|
|
}
|
|
|
|
const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
|
|
|
|
const url = decodeRelay($page.params.relay!)
|
|
</script>
|
|
|
|
<PageBar {...props}>
|
|
<div class="flex min-w-0 flex-1 items-center gap-1">
|
|
<Button onclick={back} class="btn btn-ghost btn-square shrink-0 md:hidden">
|
|
<Icon icon={ArrowLeft} size={6} />
|
|
</Button>
|
|
<div class="flex min-w-0 flex-1 items-center justify-between gap-2">
|
|
<div class="flex min-w-0 flex-col gap-0.5">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
{@render title?.()}
|
|
</div>
|
|
<div class="truncate text-xs leading-4 text-primary md:hidden">
|
|
{displayRelayUrl(url)}
|
|
</div>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-1">
|
|
{@render action?.()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageBar>
|