feat: language switcher

client/src/languages/en.json

@@ -17,7 +17,10 @@
     "made": "Made with",
     "indonesia": "in Indonesia",
     "available": "This project is available on",
-    "github": "Github"
+    "github": "Github",
+    "language": "Languages:",
+    "english": "English",
+    "indonesian": "Indonesian"
   },
   "home": {
     "more": {

client/src/languages/id.json

@@ -17,7 +17,10 @@
     "made": "Diciptakan dengan",
     "indonesia": "di Indonesia",
     "available": "Proyek ini tersedia di",
-    "github": "Github"
+    "github": "Github",
+    "language": "Bahasa:",
+    "english": "Inggris",
+    "indonesian": "Indonesia"
   },
   "home": {
     "more": {

client/src/routes/__layout.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import '@fontsource/fira-mono';
   import '@fontsource/rubik';
+  import { goto } from '$app/navigation'
   import { _ } from 'svelte-i18n';
   import Navbar from '../components/navbar.svelte';
 </script>
@@ -34,12 +35,20 @@
     </main>
 
     <footer class="font-body py-8">
-      <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out">
+      <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
         {$_('footer.made')} <span class="text-red-500">&#10084;</span>
         {$_('footer.indonesia')}.
         {$_('footer.available')}
         <a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>.
       </p>
+      <p class="text-sm opacity-50 inline-block">
+        &nbsp;|&nbsp;
+      </p>
+      <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
+        {$_('footer.language')}
+        <a href="?lang=en" target="_top" class="hover:underline">{$_('footer.english')}</a>
+        <a href="?lang=id" target="_top" class="hover:underline">{$_('footer.indonesian')}</a>
+      </p>
     </footer>
   </div>
 </div>