Variable SearchPage`Const`

SearchPage: FC<SearchPageProps> = ...

The landing/home view: centered logo, the SearchForm, a settings gear, and a ThemeSwitcher. Submitting a search runs onSearch and navigates to the results route; shows a "DEV MODE" badge in development.

Param: props

The SearchPageProps with the search and drawer-toggle callbacks.

Returns

The search landing page element.

Example

<SearchPage onSearch={(q) => runSearch(q)} onDrawerToggle={() => openDrawer()} />
// Submitting "acetone" calls onSearch("acetone") and navigates to /results.

Source

const SearchPage: FC<SearchPageProps> = ({ onSearch, onDrawerToggle }) => {
  const navigate = useNavigate();
  const { mode } = useTheme();

  const logo = mode === "light" ? lightLogo : darkLogo;

  const handleSearch = (query: string) => {
    onSearch(query);
    navigate("/results");
  };

  const containerClass = `search-page__container ${isDevelopment ? "search-page__container--dev" : "search-page__container--production"}`;
  const logoClass = `search-page__logo ${isDevelopment ? "search-page__logo--dev" : "search-page__logo--production"}`;
  const wrapperClass = `search-page__search-wrapper ${isDevelopment ? "search-page__search-wrapper--dev" : "search-page__search-wrapper--production"}`;

  return (
    <SearchContainer className={containerClass}>
      {/* Settings Gear - Top Right */}
      <IconButton className={styles['search-page-settings-button']} onClick={onDrawerToggle} size="medium">
        <SettingsIcon />
      </IconButton>

      {/* Theme Switcher - Bottom Right */}
      <Box className={styles['search-page-theme-switcher']}>
        <ThemeSwitcher />
      </Box>

      {isDevelopment && <DevBadge className="search-page__dev-badge">DEV MODE</DevBadge>}

      <div className="search-page__logo-container">
        <img src={logo} alt="Supplier Search" className={logoClass} />
      </div>

      <div className={wrapperClass}>
        <SearchForm
          onSearch={handleSearch}
          onDrawerToggle={onDrawerToggle}
          placeholder="Search for products..."
          showAdvancedButton={true}
        />
      </div>
    </SearchContainer>
  );
};