You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.0 KiB
42 lines
1.0 KiB
<script lang="ts"> |
|
import type { Snippet } from "svelte"; |
|
import Button from "./Button.svelte"; |
|
|
|
interface Props { |
|
title: string; |
|
actionLabel?: string; |
|
onAction?: () => void; |
|
onMore?: () => void; |
|
children?: Snippet; |
|
} |
|
|
|
let { title, actionLabel, onAction, onMore, children }: Props = $props(); |
|
</script> |
|
|
|
<div class="flex flex-wrap items-center gap-2 p-1 rounded-[32px] w-full"> |
|
<div class="flex-1 min-w-0"> |
|
<h1 class="font-heading text-h1 text-white truncate">{title}</h1> |
|
</div> |
|
{#if children} |
|
{@render children()} |
|
{/if} |
|
{#if actionLabel && onAction} |
|
<Button variant="primary" onclick={onAction}> |
|
{actionLabel} |
|
</Button> |
|
{/if} |
|
{#if onMore} |
|
<button |
|
type="button" |
|
class="p-1 flex items-center justify-center hover:bg-dark/50 rounded-full transition-colors" |
|
onclick={onMore} |
|
> |
|
<span |
|
class="material-symbols-rounded text-light" |
|
style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;" |
|
> |
|
more_horiz |
|
</span> |
|
</button> |
|
{/if} |
|
</div>
|
|
|