40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
export let title: string;
|
|
export let subtitle: string | undefined = undefined;
|
|
export let link: { url: string; text: string; tabindex?: number } | undefined = undefined;
|
|
export let required: boolean = false;
|
|
export let style: 'default' | 'title' | 'white' = 'default';
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-2" class:style-title={style === 'title'} class:style-white={style === 'white'}>
|
|
<div class="flex justify-between">
|
|
<p class="title text-xs text-text-teritary">
|
|
{title || ''}{#if required}<span class="text-accent">*</span>{/if}
|
|
</p>
|
|
{#if link}
|
|
<a href={link.url} tabindex={link.tabindex}>{link.text}</a>
|
|
{/if}
|
|
</div>
|
|
{#if subtitle}
|
|
<p class="subtitle text-xs text-text-teritary">{subtitle}</p>
|
|
{/if}
|
|
<slot />
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.style-title {
|
|
@apply gap-4;
|
|
}
|
|
|
|
.style-title p.title {
|
|
@apply text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap;
|
|
}
|
|
|
|
.style-title p.subtitle {
|
|
@apply text-base text-text-primary;
|
|
}
|
|
|
|
.style-white p.title {
|
|
@apply font-semibold text-text-header;
|
|
}
|
|
</style>
|