src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte

@@ -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>