src/shared/ui/Section/Section.svelte

@@ -0,0 +1,70 @@
+<!--
+    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>