<!--
    Component: Search
    Typeface search input for the comparison view.
    Updates the global filterManager query to filter the font list.
-->
<script lang="ts">
import { filterManager } from '$features/GetFonts';
import { SearchBar } from '$shared/ui';
</script>

<div class="p-6 border-b border-black/5">
    <SearchBar
        id="font-search"
        class="w-full"
        placeholder="Typeface Search"
        aria-label="Search typefaces"
        bind:value={filterManager.queryValue}
        fullWidth
    />
</div>
