feat(FontSearch): create a component that wraps SampleList with Section
This commit is contained in:
@@ -0,0 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
Component: FontSearchSection
|
||||||
|
Wraps FontSearch 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 { getContext } from 'svelte';
|
||||||
|
import FontSearch from '../FontSearch/FontSearch.svelte';
|
||||||
|
|
||||||
|
let isExpanded = $state(true);
|
||||||
|
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={2}
|
||||||
|
id="query_module"
|
||||||
|
onTitleStatusChange={handleTitleStatusChanged}
|
||||||
|
title="Query Module"
|
||||||
|
headerTitle="query_matrix"
|
||||||
|
headerSubtitle="active_nodes:"
|
||||||
|
>
|
||||||
|
{#snippet content({ className })}
|
||||||
|
<div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
|
||||||
|
<FontSearch bind:showFilters={isExpanded} />
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
</Section>
|
||||||
Reference in New Issue
Block a user