Text color and background colour is controlled by CSS vars

3 files changed, 44 insertions, 2 deletions

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6ad0052..f5de8b8 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<footer>
-  <p class="btn btn--dark back-to-top-link">
+<footer class="dark">
+  <p class="btn back-to-top-link">
     <a href="#main">▴ Back til tap</a>
   </p>
 </footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
new file mode 100644
index 0000000..8174efe
--- /dev/null
+++ b/src/components/Navbar.astro
@@ -0,0 +1,14 @@
+---
+import type Locale from '../types/Locale';
+import SwitchLanguageLink from './SwitchLanguageLink.astro';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+---
+
+<nav class="dark">
+  <SwitchLanguageLink currentLocale={locale} />
+</nav>
diff --git a/src/components/SwitchLanguageLink.astro b/src/components/SwitchLanguageLink.astro
new file mode 100644
index 0000000..77dfa18
--- /dev/null
+++ b/src/components/SwitchLanguageLink.astro
@@ -0,0 +1,28 @@
+---
+import tPage from '../i18n/translations/components/languageLinks';
+import tSite from '../i18n/translations/site';
+import translate from '../i18n/translate';
+import type Locale from '../types/Locale';
+
+interface Props {
+  currentLocale: Locale;
+}
+
+// This logic assumes that there are exactly two locales.
+const { currentLocale } = Astro.props;
+const otherLocale: Locale = currentLocale === 'sco' ? 'en-GB' : 'sco';
+const currentPath = Astro.url.pathname;
+const currentLocaleInPath = new RegExp(`(?<=^/)(${currentLocale}/)?`);
+const otherLocalePath = currentPath.replace(currentLocaleInPath, `${otherLocale}/`);
+
+const t = translate(currentLocale);
+---
+
+<a class="link" href={otherLocalePath}>
+  {
+    t(tPage, {
+      key: 'language-link-text',
+      language: t(tSite, { key: 'locale', locale: otherLocale }),
+    })
+  }
+</a>