only languages present in the dataset appear in the filter dropdown

ui/src/App.tsx

@@ -43,6 +43,7 @@ const App = () => {
 	const [cards, setCards] = useState<Repo[]>([]);
 	const [currentPage, setCurrentPage] = useState(1);
 	const [selectedLanguages, setSelectedLanguages] = useState<Language[]>([]);
+	const [availableLanguages, setAvailableLanguages] = useState<Language[]>([]);
 	const cardsPerPage = 20;
 
 	useEffect(() => {
@@ -56,6 +57,11 @@ const App = () => {
 				}
 				const data = await response.json();
 				setCards(data);
+
+				const availableLanguages = Array.from(
+					new Set(data.map((repo: Repo) => repo.language).filter(Boolean))
+				) as Language[];
+				setAvailableLanguages(availableLanguages);
 			} catch (error) {
 				console.error("Error fetching repos:", (error as Error).message);
 			}
@@ -83,7 +89,11 @@ const App = () => {
 				<Navbar />
 				<Header />
 				<Container sx={{ flex: 1 }}>
-					<Filter selectedLanguages={selectedLanguages} onFilterChange={handleFilterChange} />
+					<Filter
+						selectedLanguages={selectedLanguages}
+						onFilterChange={handleFilterChange}
+						availableLanguages={availableLanguages}
+					/>
 					<Box sx={{ display: "flex", flexDirection: "column", gap: 3, alignItems: "center" }}>
 						{currentCards.map((repo) => (
 							<Card repo={repo} key={repo.name} />

ui/src/components/Filter.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";
-import { Language, languageImageMap } from "../languages.ts";
+import { Language } from "../languages.ts";
 
 type FilterProps = {
 	selectedLanguages: Language[];
+	availableLanguages: Language[];
 	onFilterChange: (selectedLanguages: Language[]) => void;
 };
 
-const Filter: React.FC<FilterProps> = ({ selectedLanguages, onFilterChange }) => {
+const Filter: React.FC<FilterProps> = ({ availableLanguages, onFilterChange }) => {
 	const [selectedLanguage, setSelectedLanguage] = useState<Language | "">("");
 
 	const handleDropdownChange = (event: SelectChangeEvent<Language | "">) => {
@@ -67,7 +68,7 @@ const Filter: React.FC<FilterProps> = ({ selectedLanguages, onFilterChange }) =>
 					}}
 				>
 					<MenuItem value="">All Languages</MenuItem>
-					{Object.keys(languageImageMap).map((language) => (
+					{availableLanguages.map((language) => (
 						<MenuItem key={language} value={language}>
 							{language}
 						</MenuItem>