Ilia Mashkov
60 lines
1.9 KiB
Svelte
60 lines
1.9 KiB
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 { cn } from '$shared/lib';
|
|
import {
|
|
Label,
|
|
Section,
|
|
} from '$shared/ui';
|
|
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={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
|
|
<SampleList />
|
|
</div>
|
|
{/snippet}
|
|
</Section>
|
|
{/snippet}
|
|
</NavigationWrapper>
|