frontend-svelte/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte

<!--
    Component: SampleListSection
    Wraps SampleList with a Section component
-->
<script lang="ts">
import { handleTitleStatusChanged } from '$entities/Breadcrumb';
import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Section } from '$shared/ui';
import {
    type Snippet,
    getContext,
} from 'svelte';
import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
import SampleList from '../SampleList/SampleList.svelte';

const responsive = getContext<ResponsiveManager>('responsive');
</script>

<Section
    class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
    index={3}
    id="sample_set"
    onTitleStatusChange={handleTitleStatusChanged}
    title="Sample Set"
    headerTitle="visual_output"
    headerSubtitle="render_engine:"
>
    {#snippet headerContent()}
        <LayoutSwitch />
    {/snippet}

    {#snippet content({ className })}
        <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
            <SampleList />
        </div>
    {/snippet}
</Section>