Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<script lang="ts"> import { resolve } from "$app/paths"; import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import Card from "$lib/components/ui/Card.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}
<Card border padding="none" class="divide-y divide-border-default"> <div class="flex items-center justify-between rounded-t bg-background-subtle min-h-3xl px-2xs dark:bg-background-canvas" > <span class="px-xs"> {#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} </span> {@render action?.()} </div> {@render children()}</Card>