Function FilterControls

  • FilterControls(props: FilterControlsProps): Element

  • Renders a set of controls for filtering and sorting repositories

    Features:

    • Search input with icon for filtering by name
    • Language dropdown with all available programming languages
    • Sort criteria selector (stars, forks, updated)
    • Animated sort direction toggle
    • Responsive layout (stacks on mobile)
    • Dark mode support
    • Accessible form controls

    Visual Elements:

    • Search input with magnifying glass icon
    • Language dropdown with filter icon
    • Sort criteria dropdown
    • Animated sort direction toggle button
    • Consistent hover and focus states
    • Responsive container with proper spacing

    Parameters

    • props: FilterControlsProps

      Component properties

      Props for the FilterControls component

      FilterControlsProps

      • languages: string[]

        Array of available programming languages to filter by

      • onLanguageChange: (value: string) => void

        Callback when language filter changes

      • onSearchChange: (value: string) => void

        Callback when search input changes

      • onSortByChange: (value: "stars" | "forks" | "updated") => void

        Callback when sort criteria changes

      • onSortOrderChange: () => void

        Callback when sort order is toggled

      • searchQuery: string

        Current search query for filtering repositories

      • selectedLanguage: string

        Currently selected programming language filter

      • sortBy: "stars" | "forks" | "updated"

        Current sort criteria

      • sortOrder: "asc" | "desc"

        Current sort direction

    Returns Element

    The filter controls component

    Example

    <FilterControls
      searchQuery=""
      selectedLanguage=""
      sortBy="stars"
      sortOrder="desc"
      languages={['JavaScript', 'TypeScript', 'Python']}
      onSearchChange={(query) => setSearch(query)}
      onLanguageChange={(lang) => setLanguage(lang)}
      onSortByChange={(sort) => setSortBy(sort)}
      onSortOrderChange={() => toggleSortOrder()}
    />

Settings

Member Visibility