Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const hiddenContent = tv({ base: "flex flex-wrap items-center gap-x-xs gap-y-2xs text-foreground-muted not-italic", variants: { size: { small: "typography-paragraph-small", regular: "typography-paragraph-regular" } }, defaultVariants: { size: "small" } });
export type HiddenContentSize = NonNullable<VariantProps<typeof hiddenContent>["size"]>;</script>
<script lang="ts"> import TriangleAlert from "$icon/triangle-alert"; import Button from "#lib/components/ui/Button.svelte"; import Card from "#lib/components/ui/Card.svelte";
interface Props { message: string; action?: { label: string; onclick: () => void }; size?: HiddenContentSize; icon?: boolean; class?: string; }
let { message, action, size = "small", icon = true, class: className }: Props = $props();</script>
<Card border={false} background={false} rounded={false} padding="none" class={hiddenContent({ size, class: className })}> <span class="flex min-w-0 flex-[1_1_12rem] items-center gap-xs"> {#if icon} <TriangleAlert class="size-4 shrink-0" aria-hidden="true" /> {/if} <span class="min-w-0">{message}</span> </span> {#if action} <Button size="small" onclick={action.onclick}>{action.label}</Button> {/if}</Card>