Localizes language names in the language pie chart

Uses `Intl.DisplayNames` to display localized language names in the language pie chart, enhancing user experience and readability.

Also converts country and language values from the CSV data to ISO codes for standardization and improved data handling.
Adds tooltip to display ISO language code.
This commit is contained in:
2025-05-22 01:32:53 +02:00
parent 9fa7475da7
commit 2624bf1378
10 changed files with 609 additions and 232 deletions

View File

@ -0,0 +1,31 @@
"use client";
import { useEffect, useState } from "react";
import { getLocalizedCountryName } from "../lib/localization";
interface CountryDisplayProps {
countryCode: string | null | undefined;
className?: string;
}
/**
* Component to display a country name from its ISO 3166-1 alpha-2 code
* Uses Intl.DisplayNames API when available, falls back to the code
*/
export default function CountryDisplay({
countryCode,
className,
}: CountryDisplayProps) {
const [countryName, setCountryName] = useState<string>(
countryCode || "Unknown",
);
useEffect(() => {
// Only run in the browser and if we have a valid code
if (typeof window !== "undefined" && countryCode) {
setCountryName(getLocalizedCountryName(countryCode));
}
}, [countryCode]);
return <span className={className}>{countryName}</span>;
}