Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<script lang="ts"> import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import LayerCard from "#lib/components/ui/LayerCard.svelte"; import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte"; import LayerCardSecondary from "#lib/components/ui/LayerCardSecondary.svelte";
interface Props { title: string; icon: Component<SvelteHTMLElements["svg"]>; /** an unresolved app path; when set the heading itself links, as the * notifications card does */ href?: string; /** trailing content in the header row, e.g. a "view all" link */ action?: Snippet; children: Snippet; }
let { title, icon, href, action, children }: Props = $props();
const Icon = $derived(icon);</script>
{#snippet heading()} <h3 class="flex items-center gap-xs text-black dark:text-white"> <Icon class="size-4 shrink-0" aria-hidden="true" /> {title} </h3>{/snippet}
<LayerCard> <LayerCardSecondary class="min-h-[calc(2.5rem-2*var(--layer-gap))] justify-between py-0 pr-0"> {#if href} <!-- <a href={resolve(href as "/")} class="flex flex-1 items-center px-sm py-xs no-underline hover:no-underline" > </a> --> {@render heading()} {:else} {@render heading()} {/if} {@render action?.()} </LayerCardSecondary> <LayerCardPrimary padding="none"> {@render children()} </LayerCardPrimary></LayerCard>