Component: HeaderSearchBar

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/astro/common/header-search-bar.tsx
• src/components/astro/database/reactive-datatable.tsx
• src/pages/database/fuse.config.ts
• src/pages/database/data.json.ts
• src/pages/career-paths/[path]/data.json.ts

The HeaderSearchBar is a client-side React component responsible for capturing user search queries. It is designed as a simple, reusable form element containing a text input and a search icon. Its primary function is to facilitate searching for cybersecurity certifications within the application.

The component is used within larger components, such as the ReactiveDatatable, to provide a user interface for filtering data. It can operate in two ways: by triggering a standard HTML form submission that reloads the page with a query parameter, or by passing user input to a parent component for real-time, client-side filtering.

Component Definition

The HeaderSearchBar is a functional React component that renders an HTML <form>. It is styled using Tailwind CSS and includes an embedded SVG icon for visual representation.

Sources: src/components/astro/common/header-search-bar.tsx:14-51

Properties

The component accepts a set of properties defined by the HeaderSearchBarProps interface.

Prop	Type	Default	Description
value	string | null (optional)	undefined	The current value of the search input field. Used to make it a controlled component.
onInput	FormEventHandler (optional)	undefined	A callback function that fires when the user types in the input field.
base_url	string (optional)	/database	The base URL used as the action for the form submission. The search query will be appended to this URL.

Sources: src/components/astro/common/header-search-bar.tsx:5-12

JSX Structure

The component's structure consists of a <form> wrapping a <div> that contains an SVG search icon and an <input> element. The icon is positioned absolutely within the input field for a modern search bar appearance.

// src/components/astro/common/header-search-bar.tsx:14-51
export const HeaderSearchBar: FC<HeaderSearchBarProps> = ({
    value,
    onInput,
    base_url = "/database",
}) => {
    return (
        <form className="relative rounded-full shadow-sm"
              method="get"
              action={ base_url }
        >
            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-zinc-500 w-8 h-8">
                <svg>...</svg>
            </div>
            <label htmlFor="query"
                   className="sr-only"
            >
                Search for certification
            </label>
            <input type="text"
                   name="query"
                   id="query"
                   className="block w-full rounded-md border-0 py-1.5 pl-10 ..."
                   placeholder="Search for certification"
                   value={ value ?? undefined }
                   onInput={ onInput }
            />
        </form>
    );
};

Sources: src/components/astro/common/header-search-bar.tsx:14-51

Search Mechanism and Data Flow

The HeaderSearchBar is integrated into the ReactiveDatatable component to enable filtering of certification data. The search functionality is handled client-side using Fuse.js for fuzzy searching.

Integration with ReactiveDatatable

In ReactiveDatatable, the HeaderSearchBar is used to control the query state variable.

1. Initial Load: On component mount, ReactiveDatatable reads the query parameter from the URL and sets the initial state. This allows search results to be shared via URL.
2. Live Filtering: As the user types into the search bar, the onInput event handler updates the query state in the ReactiveDatatable component.
3. Data Filtering: A useMemo hook, which depends on the query state, recalculates the display_data by running the search query against the Fuse.js instance.
4. UI Update: The table re-renders to show the filtered results.

The following diagram illustrates the live filtering flow when a user types in the search bar.

This diagram shows the sequence of events for real-time filtering within the ReactiveDatatable component.

Sources: src/components/astro/database/reactive-datatable.tsx:49, src/components/astro/database/reactive-datatable.tsx:162-173, src/components/astro/database/reactive-datatable.tsx:275-278

Form Submission

In addition to live filtering, the component is wrapped in a <form> with method="get". If the user presses "Enter", the form is submitted. This causes a page navigation to [base_url]/?query=..., where ... is the user's input. The ReactiveDatatable component is designed to handle this by reading the query parameter from the URL upon loading.

Sources: src/components/astro/common/header-search-bar.tsx:18-21, src/components/astro/database/reactive-datatable.tsx:178-181

Fuse.js Search Configuration

The core search logic is powered by Fuse.js. The configuration specifies which fields of the certification data are searchable and sets parameters for the fuzzy search algorithm.

The following fields are included in the search:

Key	Weight
title	0.6
acronym	1
provider	0.4
career_paths	0.2
description_short	0.1

Sources: src/pages/database/fuse.config.ts:3-17

The data for this search is fetched from the /database/data.json endpoint, which aggregates certification metadata. A pre-computed Fuse.js index is also fetched from /database/data-index.json to speed up initialization.

Sources: src/components/astro/database/reactive-datatable.tsx:184-187, src/pages/database/data.json.ts, src/pages/career-paths/[path]/data.json.ts