fuse-angular/src/app/modules/admin/ui/other-components/common/search/search.component.html

<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_mini:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Other Components</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_mini:chevron-right'"></mat-icon>
                    <span class="ml-1 text-secondary">Common</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Search
                </h2>
            </div>
        </div>
        <button
            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
            mat-icon-button
            (click)="toggleDrawer()">
            <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
        </button>
    </div>

    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">

        <p>
            This component can be used for searching. It will make API calls as you start typing the search query into the search field and show the results in the
            <em>Autocomplete</em> panel.
        </p>

        <h2>Usage</h2>
        <p>
            Here's the basic usage of the component:
        </p>
        <textarea
            fuse-highlight
            lang="html">
            <search [appearance]="'bar'"></search>
        </textarea>

        <h2>Properties</h2>
        <div class="bg-card py-3 px-6 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Default</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>&#64;Input()</div>
                            <div>appearance: 'basic' | 'bar'</div>
                        </td>
                        <td>
                            Appearance of the search. <strong>basic</strong> will show a simple search field. <strong>bar</strong> will show a dropdown bar that covers the
                            header.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">bar</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>&#64;Input()</div>
                            <div>debounce: number</div>
                        </td>
                        <td>
                            Number of milliseconds to debounce the API calls.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">300</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>&#64;Input()</div>
                            <div>minLength: number</div>
                        </td>
                        <td>
                            Minimum length of the search value required before making API calls.
                        </td>
                        <td>
                            <code class="whitespace-nowrap">2</code>
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>&#64;Output()</div>
                            <div>search: EventEmitter</div>
                        </td>
                        <td>
                            An event emitted after search happened.
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

</div>