Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<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-2 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 dark:bg-background-canvas" > {#if href} <a href={resolve(href as "/")} class="flex flex-1 items-center px-4 py-2 no-underline hover:no-underline" > {@render heading()} </a> {:else} <div class="px-4 py-2">{@render heading()}</div> {/if} {@render action?.()} </div> {@render children()}</Card>