From 12844432ac94c0a289f20285f4742c9597b4324f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 4 Feb 2026 10:47:04 +0300
Subject: [PATCH] feat(Section): add a snippet prop for description

---
 src/shared/ui/Section/Section.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
index e5b0c5f..6e827e4 100644
--- a/src/shared/ui/Section/Section.svelte
+++ b/src/shared/ui/Section/Section.svelte
@@ -25,6 +25,10 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * Snippet for a title icon
      */
     icon?: Snippet<[{ className?: string }]>;
+    /**
+     * Snippet for a title description
+     */
+    description?: Snippet<[{ className?: string }]>;
     /**
      * Index of the section
      */
@@ -44,7 +48,7 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     children?: Snippet;
 }
 
-const { class: className, title, icon, index = 0, onTitleStatusChange, children }: Props = $props();
+const { class: className, title, icon, description, index = 0, onTitleStatusChange, children }: Props = $props();
 
 let titleContainer = $state<HTMLElement>();
 const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 };
@@ -92,7 +96,9 @@ $effect(() => {
                 {@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'}
+            {#if description}
+                {@render description({ className: 'font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
+            {:else if typeof index === 'number'}
                 <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
                     Component_{String(index).padStart(3, '0')}
                 </span>