Filter Dropdown

Source: apps/landing/src/app/components/filter-dropdown.tsx

Overview

FilterDropdown is a custom dropdown built without Radix UI. It manages its own open/close state and click-outside handling. Each dropdown shows an icon, a label, and a list of options.

Props

Prop	Type	Description
`label`	`string`	Display text when no filter is active
`icon`	`(color: string) => ReactNode`	Render function for the leading icon (receives color string)
`value`	`string`	Currently selected value
`options`	`string[]`	List of selectable options
`onChange`	`(value: string) => void`	Selection handler
`defaultLabel`	`string`	The “all” / unfiltered value

Behavior

Active state: When value !== defaultLabel, the button gets a blue tint (bg-primary-50 border-primary) and the icon/text turn blue.
Hover state: Same blue tint as active.
Clear filter: When active, a “Clear filter” option appears at the top of the dropdown.
Click-outside: Closes the dropdown via a mousedown event listener.

Usage in the Codebase

Landing — Job Board

<FilterDropdown
  label="Department"
  icon={(color) => <BuildingIcon style={{ color }} />}
  value={selectedDepartment}
  options={departments}
  onChange={setSelectedDepartment}
  defaultLabel="All Departments"
/>