glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Section): add a snippet prop for description

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-04 10:47:04 +03:00
parent a9aba10f09
commit 12844432ac
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/shared/ui/Section/Section.svelte
View File

@@ -25,6 +25,10 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
* Snippet for a title icon * Snippet for a title icon
*/ */
icon?: Snippet<[{ className?: string }]>; icon?: Snippet<[{ className?: string }]>;
/**
* Snippet for a title description
*/
description?: Snippet<[{ className?: string }]>;
/** /**
* Index of the section * Index of the section
*/ */
@@ -44,7 +48,7 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
children?: Snippet; 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>(); let titleContainer = $state<HTMLElement>();
const flyParams: FlyParams = { y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }; 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' })} {@render icon({ className: 'size-4 stroke-gray-900 stroke-1' })}
<div class="w-px h-3 bg-gray-400/50"></div> <div class="w-px h-3 bg-gray-400/50"></div>
{/if} {/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"> <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
Component_{String(index).padStart(3, '0')} Component_{String(index).padStart(3, '0')}
</span> </span>