mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 21:32:08 +01:00
Kaj Kowalski
5317b2aa39
Improves the dashboard with additional metrics and visualizations to provide a more comprehensive overview of application usage and performance. Adds new charts, including: - Word cloud for category analysis - Geographic map for user distribution (simulated data) - Response time distribution chart Refactors existing components for improved clarity and reusability, including the introduction of a generic `MetricCard` component. Improves error handling and user feedback during data refresh and session loading. Adds recommended VSCode extensions for ESLint and Prettier.
32 lines
844 B
TypeScript
32 lines
844 B
TypeScript
"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>;
|
|
}
|