diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
index d601f7b34..609d10f48 100644
--- a/src/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -1,4 +1,5 @@
import Link from "next/link";
+import { Fragment } from "react";
import Text from "src/components/text/Text";
import useLanguage from "src/utils/hooks/useLanguage";
@@ -8,17 +9,24 @@ import styles from "./languageSwitcher.module.css";
export default function LanguageSwitcher() {
const { slugTranslations } = useLanguage();
return (
-
+
{slugTranslations?.map(
- (slugTranslation) =>
+ (slugTranslation, index) =>
slugTranslation?.language && (
-
-
- {slugTranslation.language.id.toUpperCase()}
-
-
+
+ -
+
+
+ {slugTranslation.language.id.toUpperCase()}
+
+
+
+ {index < slugTranslations.length - 1 && (
+
+ )}
+
),
)}
-
+
);
}
diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css
index 7850d8815..b554b4302 100644
--- a/src/components/languageSwitcher/languageSwitcher.module.css
+++ b/src/components/languageSwitcher/languageSwitcher.module.css
@@ -1,4 +1,10 @@
-.wrapper {
+.list {
display: flex;
gap: 1rem;
+ list-style: none;
+}
+
+.divider {
+ border-left: 1px solid var(--primary-black);
+ flex-grow: 1;
}
diff --git a/src/utils/hooks/useLanguage.ts b/src/utils/hooks/useLanguage.ts
index c017ec7f4..bdbdfbd8b 100644
--- a/src/utils/hooks/useLanguage.ts
+++ b/src/utils/hooks/useLanguage.ts
@@ -25,7 +25,7 @@ function useSlugTranslations(
slug,
language: currentLanguage?.id,
},
- ).then((data) => setSlugTranslationsData(data));
+ ).then(setSlugTranslationsData);
}, [currentLanguage, slug]);
return (