109 lines
3.2 KiB
Svelte
109 lines
3.2 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;
|
|
/**
|
|
* Callback function to notify when the title visibility status changes
|
|
*
|
|
* @param index - Index of the section
|
|
* @param isPast - Whether the section is past the current scroll position
|
|
* @param title - Snippet for a title itself
|
|
* @returns Cleanup callback
|
|
*/
|
|
onTitleStatusChange?: (index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) => () => void;
|
|
/**
|
|
* Snippet for the section content
|
|
*/
|
|
children?: Snippet;
|
|
}
|
|
|
|
const { class: className, title, icon, index = 0, onTitleStatusChange, children }: Props = $props();
|
|
|
|
let titleContainer = $state<HTMLElement>();
|
|
const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
|
|
|
|
// Track if the user has actually scrolled away from view
|
|
let isScrolledPast = $state(false);
|
|
|
|
$effect(() => {
|
|
if (!titleContainer) {
|
|
return;
|
|
}
|
|
let cleanup: ((index: number) => void) | undefined;
|
|
const observer = new IntersectionObserver(entries => {
|
|
const entry = entries[0];
|
|
const isPast = !entry.isIntersecting && entry.boundingClientRect.top < 0;
|
|
|
|
if (isPast !== isScrolledPast) {
|
|
isScrolledPast = isPast;
|
|
cleanup = onTitleStatusChange?.(index, isPast, title);
|
|
}
|
|
}, {
|
|
// Set threshold to 0 to trigger exactly when the last pixel leaves
|
|
threshold: 0,
|
|
});
|
|
|
|
observer.observe(titleContainer);
|
|
return () => {
|
|
observer.disconnect();
|
|
cleanup?.(index);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<section
|
|
class={cn(
|
|
'flex flex-col',
|
|
className,
|
|
)}
|
|
in:fly={flyParams}
|
|
out:fly={flyParams}
|
|
>
|
|
<div class="flex flex-col gap-2" bind:this={titleContainer}>
|
|
<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>
|