import { useTranslation } from "react-i18next"; import { cn } from "@/shared/lib/cn"; import { SearchBar } from "@/shared/ui/SearchBar"; import { Button } from "@/shared/ui/button"; import { FilterRow } from "@/shared/ui/page-shell"; import { SkillCategoryFilter } from "./SkillCategoryFilter"; import type { SkillCategory } from "../lib/skillCategories"; import type { SkillsFilter } from "../lib/skillsHelpers"; interface SkillsToolbarProps { search: string; onSearchChange: (value: string) => void; activeFilter: SkillsFilter; onActiveFilterChange: (filter: SkillsFilter) => void; projectFilters: { id: string; name: string }[]; categoryFilters: SkillCategory[]; selectedCategories: SkillCategory[]; onSelectedCategoriesChange: (categories: SkillCategory[]) => void; dropHandlers?: React.HTMLAttributes; isDragOver?: boolean; } function FilterButton({ active, children, onClick, }: { active: boolean; children: React.ReactNode; onClick: () => void; }) { return ( ); } export function SkillsToolbar({ search, onSearchChange, activeFilter, onActiveFilterChange, projectFilters, categoryFilters, selectedCategories, onSelectedCategoriesChange, dropHandlers, isDragOver, }: SkillsToolbarProps) { const { t } = useTranslation(["skills"]); return (

onActiveFilterChange("all")} > {t("view.filtersAllSources")} onActiveFilterChange("global")} > {t("view.filtersGlobal")} {projectFilters.map((project) => { const filterValue = `project:${project.id}` as const; return ( onActiveFilterChange(filterValue)} > {project.name} ); })} {categoryFilters.length > 0 ? ( ) : null}

); }