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