mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 10:52:08 +01:00
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:
31
components/LanguageDisplay.tsx
Normal file
31
components/LanguageDisplay.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getLocalizedLanguageName } from "../lib/localization";
|
||||
|
||||
interface LanguageDisplayProps {
|
||||
languageCode: string | null | undefined;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to display a language name from its ISO 639-1 code
|
||||
* Uses Intl.DisplayNames API when available, falls back to the code
|
||||
*/
|
||||
export default function LanguageDisplay({
|
||||
languageCode,
|
||||
className,
|
||||
}: LanguageDisplayProps) {
|
||||
const [languageName, setLanguageName] = useState<string>(
|
||||
languageCode || "Unknown",
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// Only run in the browser and if we have a valid code
|
||||
if (typeof window !== "undefined" && languageCode) {
|
||||
setLanguageName(getLocalizedLanguageName(languageCode));
|
||||
}
|
||||
}, [languageCode]);
|
||||
|
||||
return <span className={className}>{languageName}</span>;
|
||||
}
|
||||
Reference in New Issue
Block a user