71 lines
1.9 KiB
Svelte
71 lines
1.9 KiB
Svelte
|
<!--
|
||
|
|
Component: Section
|
||
|
|
Provides a container for a page widget with snippets for a title
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||
|
|
import type { Snippet } from 'svelte';
|
||
|
|
import { cubicOut } from 'svelte/easing';
|
||
|
|
import type { HTMLAttributes } from 'svelte/elements';
|
||
|
|
import {
|
||
|
|
type FlyParams,
|
||
|
|
fly,
|
||
|
|
} from 'svelte/transition';
|
||
|
|
|
||
|
|
interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
||
|
|
/**
|
||
|
|
* Additional CSS classes to apply to the section container.
|
||
|
|
*/
|
||
|
|
class?: string;
|
||
|
|
/**
|
||
|
|
* Snippet for a title itself
|
||
|
|
*/
|
||
|
|
title?: Snippet<[{ className?: string }]>;
|
||
|
|
/**
|
||
|
|
* Snippet for a title icon
|
||
|
|
*/
|
||
|
|
icon?: Snippet<[{ className?: string }]>;
|
||
|
|
/**
|
||
|
|
* Index of the section
|
||
|
|
*/
|
||
|
|
index?: number;
|
||
|
|
/**
|
||
|
|
* Snippet for the section content
|
||
|
|
*/
|
||
|
|
children?: Snippet;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { class: className, title, icon, index, children }: Props = $props();
|
||
|
|
|
||
|
|
const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section
|
||
|
|
class={cn(
|
||
|
|
'flex flex-col',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
in:fly={flyParams}
|
||
|
|
out:fly={flyParams}
|
||
|
|
>
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<div class="flex items-center gap-3 opacity-60">
|
||
|
|
{#if icon}
|
||
|
|
{@render icon({ className: 'size-4 stroke-gray-900 stroke-1' })}
|
||
|
|
<div class="w-px h-3 bg-gray-400/50"></div>
|
||
|
|
{/if}
|
||
|
|
{#if typeof index === 'number'}
|
||
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
|
||
|
|
Component_{String(index).padStart(3, '0')}
|
||
|
|
</span>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if title}
|
||
|
|
{@render title({ className: 'text-5xl md:text-6xl font-semibold tracking-tighter text-gray-900 leading-[0.9]' })}
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{@render children?.()}
|
||
|
|
</section>
|