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

apps/nextjs/src/components/language/language-combobox.module.css

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

apps/nextjs/src/components/language/language-combobox.tsx

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

apps/nextjs/src/components/layout/crowdin-live-translation.tsx

@@ -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>
+    </>
+  );
+};