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

<!--
    Component: SampleListSection
    Wraps SampleList with a Section component
-->
<script lang="ts">
import { NavigationWrapper } from '$entities/Breadcrumb';
import { fontStore } from '$entities/Font';
import type { ResponsiveManager } from '$shared/lib';
import {
    Label,
    Section,
} from '$shared/ui';
import clsx from 'clsx';
import { getContext } from 'svelte';
import { layoutManager } from '../../model';
import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
import SampleList from '../SampleList/SampleList.svelte';

interface Props {
    /**
     * Section index
     */
    index: number;
}

const { index }: Props = $props();

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

<NavigationWrapper index={2} title="Samples">
    {#snippet content(registerAction)}
        <Section
            class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
            {index}
            id="sample_set"
            title="Sample Set"
            headerTitle="visual_output"
            headerSubtitle="items_total: {fontStore.pagination.total ?? 0}"
            headerAction={registerAction}
        >
            {#snippet headerContent()}
                <div class="flex items-center gap-3 md:gap-4">
                    <div class="hidden md:flex items-center gap-2 mr-4">
                        <Label variant="muted" size="sm">view_mode: </Label>
                        <Label variant="default" size="sm" bold>{layoutManager.mode}</Label>
                    </div>
                    <LayoutSwitch />
                </div>
            {/snippet}

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