Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
at icy/tmrrpn
1234567891011121314151617181920212223242526272829303132333435363738<script lang="ts"> import { resolve } from "$app/paths"; import ArrowRight from "$icon/arrow-right"; import Bell from "$icon/bell"; import BellOff from "$icon/bell-off"; import Inbox from "$icon/inbox"; import PreviewCard from "./PreviewCard.svelte"; import PreviewEmpty from "./PreviewEmpty.svelte";
// there is no notification item component yet, so this renders the two empty // states only. items land under the header once that exists. let { signedIn = false }: { signedIn?: boolean } = $props();
const path = "/notifications";</script>
<PreviewCard title="Notifications" icon={Bell} href={path}> {#snippet action()} <a href={resolve(path as "/")} class="flex items-center gap-1 pr-4 typography-paragraph-small text-foreground-subtle no-underline hover:no-underline" > View all <ArrowRight class="size-3.5" aria-hidden="true" /> </a> {/snippet}
{#if signedIn} <PreviewEmpty icon={Inbox}> <p>All caught up!</p> </PreviewEmpty> {:else} <PreviewEmpty icon={BellOff}> <a href={resolve("/login" as "/")}>Log in</a> to view your inbox </PreviewEmpty> {/if}</PreviewCard>