diff --git a/src/App.tsx b/src/App.tsx index a025e8f..1dd82b2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,10 +4,14 @@ import { SearchBar } from './components/SearchBar'; import { PackageList } from './components/PackageList'; import { usePackages } from './hooks/usePackages'; +import { + Repository +} from './types'; + export default function App() { const { packages, loading, error } = usePackages(); const [search, setSearch] = useState(''); - const [selectedRepository, setSelectedRepository] = useState<'core' | 'extra' | 'all'>('all'); + const [selectedRepository, setSelectedRepository] = useState('all'); const [debouncedSearch, setDebouncedSearch] = useState(search); // Debounce search to optimize performance @@ -34,7 +38,7 @@ export default function App() { setSearch(value); }; - const handleRepositoryFilterChange = (repo: 'core' | 'extra' | 'all') => { + const handleRepositoryFilterChange = (repo: Repository) => { setSelectedRepository(repo); }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 16cb30d..abde679 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,11 +1,15 @@ import { ThemeToggle } from './ThemeToggle'; import { Logo } from './Logo'; +import { + Repository +} from '../types'; + interface HeaderProps { - onRepositoryChange: (repo: 'core' | 'extra' | 'all') => void; + onRepositoryChange: (repo: Repository) => void; } -export function Header({ onRepositoryChange }: HeaderProps) { +export function Header({ onRepositoryChange }: HeaderProps): JSX.Element { return (
@@ -17,14 +21,12 @@ export function Header({ onRepositoryChange }: HeaderProps) { {/* Repository Filter Dropdown */}
- onRepositoryChange(e.target.value as Repository) + } defaultValue="all" className="bg-nord-5 dark:bg-nord-1 text-black dark:text-white border-2 border-nord-4 dark:border-nord-2 rounded-lg py-2 px-4 focus:ring-2 focus:ring-nord-8"> + {Object.values(Repository).map((repository) => ( + + ))}
diff --git a/src/types.ts b/src/types.ts index da3e616..43a9238 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,11 @@ // Type alias for repository categories -export type Repository = 'core' | 'extra' | 'community' | 'multilib'; +export enum Repository { + All = 'all', + Core = 'core', + Extra = 'extra', + Community = 'community', + Multilib = 'multilib' +} // Interface representing a single package export interface Package {