jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(translations): add crowdin live support (#4177)

Browse Source
This commit is contained in:
Meier Lukas
2025-10-02 19:54:08 +02:00
committed by GitHub
parent 878f8f3d60
commit 514034d184
8 changed files with 100 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/nextjs/src/app/[locale]/layout.tsx
View File

@@ -23,6 +23,7 @@ import type { SupportedLanguage } from "@homarr/translation";
import { isLocaleRTL, isLocaleSupported } from "@homarr/translation"; import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";
import { Analytics } from "~/components/layout/analytics"; import { Analytics } from "~/components/layout/analytics";
import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization"; import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
import { getCurrentColorSchemeAsync } from "~/theme/color-scheme"; import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
import { DayJsLoader } from "./_client-providers/dayjs-loader"; import { DayJsLoader } from "./_client-providers/dayjs-loader";
@@ -118,10 +119,12 @@ export default async function Layout(props: {
(innerProps) => <SpotlightProvider {...innerProps} />, (innerProps) => <SpotlightProvider {...innerProps} />,
]); ]);
const { locale } = await props.params;
return ( return (
// Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
<html <html
lang={(await props.params).locale} lang={locale}
dir={direction} dir={direction}
data-mantine-color-scheme={colorScheme} data-mantine-color-scheme={colorScheme}
style={{ style={{
@@ -132,6 +135,7 @@ export default async function Layout(props: {
<head> <head>
<Analytics /> <Analytics />
<SearchEngineOptimization /> <SearchEngineOptimization />
<CrowdinLiveTranslation locale={locale} />
</head> </head>
<body className={["font-sans", fontSans.variable].join(" ")}> <body className={["font-sans", fontSans.variable].join(" ")}>
<StackedProvider> <StackedProvider>

3
apps/nextjs/src/components/language/language-combobox.module.css
View File

@@ -1,3 +0,0 @@
.flagIcon {
border-radius: 4px;
}

5
apps/nextjs/src/components/language/language-combobox.tsx
View File

@@ -6,8 +6,7 @@ import { IconCheck } from "@tabler/icons-react";
import type { SupportedLanguage } from "@homarr/translation"; import type { SupportedLanguage } from "@homarr/translation";
import { localeConfigurations, supportedLanguages } from "@homarr/translation"; import { localeConfigurations, supportedLanguages } from "@homarr/translation";
import { LanguageIcon } from "@homarr/ui";
import classes from "./language-combobox.module.css";
import "flag-icons/css/flag-icons.min.css"; import "flag-icons/css/flag-icons.min.css";
@@ -84,7 +83,7 @@ const OptionItem = ({
return ( return (
<Group wrap="nowrap" justify="space-between"> <Group wrap="nowrap" justify="space-between">
<Group wrap="nowrap"> <Group wrap="nowrap">
<span className={`fi fi-${localeConfigurations[localeKey].flagIcon} ${classes.flagIcon}`}></span> <LanguageIcon icon={localeConfigurations[localeKey].icon} />
<Group wrap="nowrap" gap="xs"> <Group wrap="nowrap" gap="xs">
<Text>{localeConfigurations[localeKey].name}</Text> <Text>{localeConfigurations[localeKey].name}</Text>
<Text size="xs" c="dimmed" inherit> <Text size="xs" c="dimmed" inherit>

17
apps/nextjs/src/components/layout/crowdin-live-translation.tsx Normal file
View File

@@ -0,0 +1,17 @@
import Script from "next/script";
import type { SupportedLanguage } from "@homarr/translation";
export const CrowdinLiveTranslation = (props: { locale: SupportedLanguage }) => {
if (props.locale !== "cr") return null;
return (
<>
<Script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js"></Script>
<Script type="text/javascript" id="crowdin-configuration">
{`var _jipt = []; _jipt.push(['project', 'homarr_labs']);`}
</Script>
</>
);
};

3
packages/spotlight/src/modes/command/children/language.tsx
View File

@@ -3,6 +3,7 @@ import { IconCheck } from "@tabler/icons-react";
import { localeConfigurations, supportedLanguages } from "@homarr/translation"; import { localeConfigurations, supportedLanguages } from "@homarr/translation";
import { useChangeLocale, useCurrentLocale, useI18n } from "@homarr/translation/client"; import { useChangeLocale, useCurrentLocale, useI18n } from "@homarr/translation/client";
import { LanguageIcon } from "@homarr/ui";
import { createChildrenOptions } from "../../../lib/children"; import { createChildrenOptions } from "../../../lib/children";
@@ -34,7 +35,7 @@ export const languageChildrenOptions = createChildrenOptions<Record<string, unkn
return ( return (
<Group mx="md" my="sm" wrap="nowrap" justify="space-between" w="100%"> <Group mx="md" my="sm" wrap="nowrap" justify="space-between" w="100%">
<Group wrap="nowrap"> <Group wrap="nowrap">
<span className={`fi fi-${configuration.flagIcon}`} style={{ borderRadius: 4 }}></span> <LanguageIcon icon={localeConfigurations[localeKey].icon} />
<Group wrap="nowrap" gap="xs"> <Group wrap="nowrap" gap="xs">
<Text>{configuration.name}</Text> <Text>{configuration.name}</Text>
<Text size="xs" c="dimmed" inherit> <Text size="xs" c="dimmed" inherit>

96
packages/translation/src/config.ts
View File

@@ -6,7 +6,7 @@ export const localeConfigurations = {
ca: { ca: {
name: "Català", name: "Català",
translatedName: "Catalan", translatedName: "Catalan",
flagIcon: "es-ct", icon: flagIcon("es-ct"),
importMrtLocalization() { importMrtLocalization() {
return import("./mantine-react-table/ca.json"); return import("./mantine-react-table/ca.json");
}, },
@@ -17,7 +17,7 @@ export const localeConfigurations = {
cn: { cn: {
name: "中文", name: "中文",
translatedName: "Chinese (Simplified)", translatedName: "Chinese (Simplified)",
flagIcon: "cn", icon: flagIcon("cn"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/zh-Hans/index.esm.mjs").then( return import("mantine-react-table/locales/zh-Hans/index.esm.mjs").then(
(module) => module.MRT_Localization_ZH_HANS, (module) => module.MRT_Localization_ZH_HANS,
@@ -27,10 +27,24 @@ export const localeConfigurations = {
return import("dayjs/locale/zh-cn").then((module) => module.default); return import("dayjs/locale/zh-cn").then((module) => module.default);
}, },
}, },
cr: {
name: "Crowdin",
translatedName: "Live translation",
icon: {
type: "custom" as const,
url: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/crowdin.svg",
},
importMrtLocalization() {
return import("mantine-react-table/locales/en/index.esm.mjs").then((module) => module.MRT_Localization_EN);
},
importDayJsLocale() {
return import("dayjs/locale/en-gb").then((module) => module.default);
},
},
cs: { cs: {
name: "Čeština", name: "Čeština",
translatedName: "Czech", translatedName: "Czech",
flagIcon: "cz", icon: flagIcon("cz"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/cs/index.esm.mjs").then((module) => module.MRT_Localization_CS); return import("mantine-react-table/locales/cs/index.esm.mjs").then((module) => module.MRT_Localization_CS);
}, },
@@ -41,7 +55,7 @@ export const localeConfigurations = {
da: { da: {
name: "Dansk", name: "Dansk",
translatedName: "Danish", translatedName: "Danish",
flagIcon: "dk", icon: flagIcon("dk"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/da/index.esm.mjs").then((module) => module.MRT_Localization_DA); return import("mantine-react-table/locales/da/index.esm.mjs").then((module) => module.MRT_Localization_DA);
}, },
@@ -52,7 +66,7 @@ export const localeConfigurations = {
de: { de: {
name: "Deutsch", name: "Deutsch",
translatedName: "German", translatedName: "German",
flagIcon: "de", icon: flagIcon("de"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/de/index.esm.mjs").then((module) => module.MRT_Localization_DE); return import("mantine-react-table/locales/de/index.esm.mjs").then((module) => module.MRT_Localization_DE);
}, },
@@ -63,7 +77,7 @@ export const localeConfigurations = {
"de-CH": { "de-CH": {
name: "Deutsch (Schweiz)", name: "Deutsch (Schweiz)",
translatedName: "German (Swiss)", translatedName: "German (Swiss)",
flagIcon: "ch", icon: flagIcon("ch"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/de/index.esm.mjs").then((module) => module.MRT_Localization_DE); return import("mantine-react-table/locales/de/index.esm.mjs").then((module) => module.MRT_Localization_DE);
}, },
@@ -74,7 +88,7 @@ export const localeConfigurations = {
"en-gb": { "en-gb": {
name: "English (UK)", name: "English (UK)",
translatedName: "English (UK)", translatedName: "English (UK)",
flagIcon: "gb", icon: flagIcon("gb"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/en/index.esm.mjs").then((module) => module.MRT_Localization_EN); return import("mantine-react-table/locales/en/index.esm.mjs").then((module) => module.MRT_Localization_EN);
}, },
@@ -85,7 +99,7 @@ export const localeConfigurations = {
en: { en: {
name: "English (US)", name: "English (US)",
translatedName: "English (US)", translatedName: "English (US)",
flagIcon: "us", icon: flagIcon("us"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/en/index.esm.mjs").then((module) => module.MRT_Localization_EN); return import("mantine-react-table/locales/en/index.esm.mjs").then((module) => module.MRT_Localization_EN);
}, },
@@ -96,7 +110,7 @@ export const localeConfigurations = {
el: { el: {
name: "Ελληνικά", name: "Ελληνικά",
translatedName: "Greek", translatedName: "Greek",
flagIcon: "gr", icon: flagIcon("gr"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/el/index.esm.mjs").then((module) => module.MRT_Localization_EL); return import("mantine-react-table/locales/el/index.esm.mjs").then((module) => module.MRT_Localization_EL);
}, },
@@ -107,7 +121,7 @@ export const localeConfigurations = {
es: { es: {
name: "Español", name: "Español",
translatedName: "Spanish", translatedName: "Spanish",
flagIcon: "es", icon: flagIcon("es"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/es/index.esm.mjs").then((module) => module.MRT_Localization_ES); return import("mantine-react-table/locales/es/index.esm.mjs").then((module) => module.MRT_Localization_ES);
}, },
@@ -118,7 +132,7 @@ export const localeConfigurations = {
et: { et: {
name: "Eesti", name: "Eesti",
translatedName: "Estonian", translatedName: "Estonian",
flagIcon: "ee", icon: flagIcon("ee"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/et/index.esm.mjs").then((module) => module.MRT_Localization_ET); return import("mantine-react-table/locales/et/index.esm.mjs").then((module) => module.MRT_Localization_ET);
}, },
@@ -129,7 +143,7 @@ export const localeConfigurations = {
fr: { fr: {
name: "Français", name: "Français",
translatedName: "French", translatedName: "French",
flagIcon: "fr", icon: flagIcon("fr"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/fr/index.esm.mjs").then((module) => module.MRT_Localization_FR); return import("mantine-react-table/locales/fr/index.esm.mjs").then((module) => module.MRT_Localization_FR);
}, },
@@ -140,7 +154,7 @@ export const localeConfigurations = {
he: { he: {
name: "עברית", name: "עברית",
translatedName: "Hebrew", translatedName: "Hebrew",
flagIcon: "il", icon: flagIcon("il"),
isRTL: true, isRTL: true,
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/he/index.esm.mjs").then((module) => module.MRT_Localization_HE); return import("mantine-react-table/locales/he/index.esm.mjs").then((module) => module.MRT_Localization_HE);
@@ -152,7 +166,7 @@ export const localeConfigurations = {
hr: { hr: {
name: "Hrvatski", name: "Hrvatski",
translatedName: "Croatian", translatedName: "Croatian",
flagIcon: "hr", icon: flagIcon("hr"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/hr/index.esm.mjs").then((module) => module.MRT_Localization_HR); return import("mantine-react-table/locales/hr/index.esm.mjs").then((module) => module.MRT_Localization_HR);
}, },
@@ -163,7 +177,7 @@ export const localeConfigurations = {
hu: { hu: {
name: "Magyar", name: "Magyar",
translatedName: "Hungarian", translatedName: "Hungarian",
flagIcon: "hu", icon: flagIcon("hu"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/hu/index.esm.mjs").then((module) => module.MRT_Localization_HU); return import("mantine-react-table/locales/hu/index.esm.mjs").then((module) => module.MRT_Localization_HU);
}, },
@@ -174,7 +188,7 @@ export const localeConfigurations = {
it: { it: {
name: "Italiano", name: "Italiano",
translatedName: "Italian", translatedName: "Italian",
flagIcon: "it", icon: flagIcon("it"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/it/index.esm.mjs").then((module) => module.MRT_Localization_IT); return import("mantine-react-table/locales/it/index.esm.mjs").then((module) => module.MRT_Localization_IT);
}, },
@@ -185,7 +199,7 @@ export const localeConfigurations = {
ja: { ja: {
name: "日本語", name: "日本語",
translatedName: "Japanese", translatedName: "Japanese",
flagIcon: "jp", icon: flagIcon("jp"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/ja/index.esm.mjs").then((module) => module.MRT_Localization_JA); return import("mantine-react-table/locales/ja/index.esm.mjs").then((module) => module.MRT_Localization_JA);
}, },
@@ -196,7 +210,7 @@ export const localeConfigurations = {
ko: { ko: {
name: "한국어", name: "한국어",
translatedName: "Korean", translatedName: "Korean",
flagIcon: "kr", icon: flagIcon("kr"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/ko/index.esm.mjs").then((module) => module.MRT_Localization_KO); return import("mantine-react-table/locales/ko/index.esm.mjs").then((module) => module.MRT_Localization_KO);
}, },
@@ -207,7 +221,7 @@ export const localeConfigurations = {
lt: { lt: {
name: "Lietuvių", name: "Lietuvių",
translatedName: "Lithuanian", translatedName: "Lithuanian",
flagIcon: "lt", icon: flagIcon("lt"),
importMrtLocalization() { importMrtLocalization() {
return import("./mantine-react-table/lt.json"); return import("./mantine-react-table/lt.json");
}, },
@@ -218,7 +232,7 @@ export const localeConfigurations = {
lv: { lv: {
name: "Latviešu", name: "Latviešu",
translatedName: "Latvian", translatedName: "Latvian",
flagIcon: "lv", icon: flagIcon("lv"),
importMrtLocalization() { importMrtLocalization() {
return import("./mantine-react-table/lv.json"); return import("./mantine-react-table/lv.json");
}, },
@@ -229,7 +243,7 @@ export const localeConfigurations = {
nl: { nl: {
name: "Nederlands", name: "Nederlands",
translatedName: "Dutch", translatedName: "Dutch",
flagIcon: "nl", icon: flagIcon("nl"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/nl/index.esm.mjs").then((module) => module.MRT_Localization_NL); return import("mantine-react-table/locales/nl/index.esm.mjs").then((module) => module.MRT_Localization_NL);
}, },
@@ -240,7 +254,7 @@ export const localeConfigurations = {
no: { no: {
name: "Norsk", name: "Norsk",
translatedName: "Norwegian", translatedName: "Norwegian",
flagIcon: "no", icon: flagIcon("no"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/no/index.esm.mjs").then((module) => module.MRT_Localization_NO); return import("mantine-react-table/locales/no/index.esm.mjs").then((module) => module.MRT_Localization_NO);
}, },
@@ -251,7 +265,7 @@ export const localeConfigurations = {
pl: { pl: {
name: "Polski", name: "Polski",
translatedName: "Polish", translatedName: "Polish",
flagIcon: "pl", icon: flagIcon("pl"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/pl/index.esm.mjs").then((module) => module.MRT_Localization_PL); return import("mantine-react-table/locales/pl/index.esm.mjs").then((module) => module.MRT_Localization_PL);
}, },
@@ -262,7 +276,7 @@ export const localeConfigurations = {
pt: { pt: {
name: "Português", name: "Português",
translatedName: "Portuguese", translatedName: "Portuguese",
flagIcon: "pt", icon: flagIcon("pt"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/pt/index.esm.mjs").then((module) => module.MRT_Localization_PT); return import("mantine-react-table/locales/pt/index.esm.mjs").then((module) => module.MRT_Localization_PT);
}, },
@@ -273,7 +287,7 @@ export const localeConfigurations = {
ro: { ro: {
name: "Românesc", name: "Românesc",
translatedName: "Romanian", translatedName: "Romanian",
flagIcon: "ro", icon: flagIcon("ro"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/ro/index.esm.mjs").then((module) => module.MRT_Localization_RO); return import("mantine-react-table/locales/ro/index.esm.mjs").then((module) => module.MRT_Localization_RO);
}, },
@@ -284,7 +298,7 @@ export const localeConfigurations = {
ru: { ru: {
name: "Русский", name: "Русский",
translatedName: "Russian", translatedName: "Russian",
flagIcon: "ru", icon: flagIcon("ru"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/ru/index.esm.mjs").then((module) => module.MRT_Localization_RU); return import("mantine-react-table/locales/ru/index.esm.mjs").then((module) => module.MRT_Localization_RU);
}, },
@@ -295,7 +309,7 @@ export const localeConfigurations = {
sk: { sk: {
name: "Slovenčina", name: "Slovenčina",
translatedName: "Slovak", translatedName: "Slovak",
flagIcon: "sk", icon: flagIcon("sk"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/sk/index.esm.mjs").then((module) => module.MRT_Localization_SK); return import("mantine-react-table/locales/sk/index.esm.mjs").then((module) => module.MRT_Localization_SK);
}, },
@@ -306,7 +320,7 @@ export const localeConfigurations = {
sl: { sl: {
name: "Slovenščina", name: "Slovenščina",
translatedName: "Slovenian", translatedName: "Slovenian",
flagIcon: "si", icon: flagIcon("si"),
importMrtLocalization() { importMrtLocalization() {
return import("./mantine-react-table/sl.json"); return import("./mantine-react-table/sl.json");
}, },
@@ -317,7 +331,7 @@ export const localeConfigurations = {
sv: { sv: {
name: "Svenska", name: "Svenska",
translatedName: "Swedish", translatedName: "Swedish",
flagIcon: "se", icon: flagIcon("se"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/sv/index.esm.mjs").then((module) => module.MRT_Localization_SV); return import("mantine-react-table/locales/sv/index.esm.mjs").then((module) => module.MRT_Localization_SV);
}, },
@@ -328,7 +342,7 @@ export const localeConfigurations = {
tr: { tr: {
name: "Türkçe", name: "Türkçe",
translatedName: "Turkish", translatedName: "Turkish",
flagIcon: "tr", icon: flagIcon("tr"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/tr/index.esm.mjs").then((module) => module.MRT_Localization_TR); return import("mantine-react-table/locales/tr/index.esm.mjs").then((module) => module.MRT_Localization_TR);
}, },
@@ -339,7 +353,7 @@ export const localeConfigurations = {
zh: { zh: {
name: "中文", name: "中文",
translatedName: "Chinese (Traditional)", translatedName: "Chinese (Traditional)",
flagIcon: "tw", icon: flagIcon("tw"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/zh-Hant/index.esm.mjs").then( return import("mantine-react-table/locales/zh-Hant/index.esm.mjs").then(
(module) => module.MRT_Localization_ZH_HANT, (module) => module.MRT_Localization_ZH_HANT,
@@ -352,7 +366,7 @@ export const localeConfigurations = {
uk: { uk: {
name: "Українська", name: "Українська",
translatedName: "Ukrainian", translatedName: "Ukrainian",
flagIcon: "ua", icon: flagIcon("ua"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/uk/index.esm.mjs").then((module) => module.MRT_Localization_UK); return import("mantine-react-table/locales/uk/index.esm.mjs").then((module) => module.MRT_Localization_UK);
}, },
@@ -363,7 +377,7 @@ export const localeConfigurations = {
vi: { vi: {
name: "Tiếng Việt", name: "Tiếng Việt",
translatedName: "Vietnamese", translatedName: "Vietnamese",
flagIcon: "vn", icon: flagIcon("vn"),
importMrtLocalization() { importMrtLocalization() {
return import("mantine-react-table/locales/vi/index.esm.mjs").then((module) => module.MRT_Localization_VI); return import("mantine-react-table/locales/vi/index.esm.mjs").then((module) => module.MRT_Localization_VI);
}, },
@@ -376,13 +390,27 @@ export const localeConfigurations = {
{ {
name: string; name: string;
translatedName: string; translatedName: string;
flagIcon: string; icon: LanguageIconDefinition;
importMrtLocalization: () => Promise<MRT_Localization>; importMrtLocalization: () => Promise<MRT_Localization>;
importDayJsLocale: () => Promise<ILocale>; importDayJsLocale: () => Promise<ILocale>;
isRTL?: boolean; isRTL?: boolean;
} }
>; >;
function flagIcon<TCode extends string>(flag: TCode) {
return { type: "flag" as const, flag };
}
export type LanguageIconDefinition =
| {
type: "flag";
flag: string;
}
| {
type: "custom";
url: string;
};
export const supportedLanguages = objectKeys(localeConfigurations); export const supportedLanguages = objectKeys(localeConfigurations);
export type SupportedLanguage = (typeof supportedLanguages)[number]; export type SupportedLanguage = (typeof supportedLanguages)[number];

1
packages/ui/src/components/index.tsx
View File

@@ -14,3 +14,4 @@ export { IntegrationAvatar } from "./integration-avatar";
export { BetaBadge } from "./beta-badge"; export { BetaBadge } from "./beta-badge";
export { MaskedImage } from "./masked-image"; export { MaskedImage } from "./masked-image";
export { MaskedOrNormalImage } from "./masked-or-normal-image"; export { MaskedOrNormalImage } from "./masked-or-normal-image";
export { LanguageIcon } from "./language-icon";

11
packages/ui/src/components/language-icon.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Image } from "@mantine/core";
import type { LanguageIconDefinition } from "@homarr/translation";
export const LanguageIcon = ({ icon }: { icon: LanguageIconDefinition }) => {
if (icon.type === "flag") {
return <span className={`fi fi-${icon.flag}`} style={{ borderRadius: 4 }}></span>;
}
return <Image src={icon.url} style={{ width: "1.3333em", height: "1.3333em" }} fit="contain" alt="Language icon" />;
};