feat: add Polish and English language switcher

components/ui/install-pwa-button.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 interface BeforeInstallPromptEvent extends Event {
   prompt: () => Promise<void>;
@@ -11,6 +12,7 @@ interface BeforeInstallPromptEvent extends Event {
 
 export function InstallPWAButton() {
   const [event, setEvent] = useState<BeforeInstallPromptEvent | null>(null);
+  const { t } = useI18n();
   useEffect(() => {
     const handlePrompt = (promptEvent: Event) => {
       promptEvent.preventDefault();
@@ -31,7 +33,7 @@ export function InstallPWAButton() {
       }}
     >
       <Download className="size-4" />
-      Zainstaluj
+      {t("pwa.install")}
     </Button>
   );
 }

components/ui/language-toggle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Languages } from "lucide-react";
+import { useI18n, type Language } from "@/lib/i18n";
+
+export function LanguageToggle() {
+  const { language, setLanguage, t } = useI18n();
+  return (
+    <label className="relative flex items-center">
+      <span className="sr-only">{t("language.label")}</span>
+      <Languages className="pointer-events-none absolute left-3 size-4 text-slate-700 dark:text-slate-200" />
+      <select
+        aria-label={t("language.label")}
+        value={language}
+        onChange={(event) => setLanguage(event.target.value as Language)}
+        className="h-10 appearance-none rounded-full border border-white/30 bg-white/30 py-2 pl-9 pr-3 text-xs font-semibold uppercase text-slate-800 backdrop-blur-xl transition hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
+      >
+        <option value="pl">{t("language.polish")}</option>
+        <option value="en">{t("language.english")}</option>
+      </select>
+    </label>
+  );
+}

components/ui/theme-toggle.tsx

@@ -3,10 +3,12 @@
 import { useEffect, useState } from "react";
 import { Moon, Sun, SunMoon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 export function ThemeToggle() {
   const [mounted, setMounted] = useState(false);
   const [isDark, setIsDark] = useState(false);
+  const { t } = useI18n();
 
   useEffect(() => {
     const root = document.documentElement;
@@ -39,7 +41,7 @@ export function ThemeToggle() {
     <Button
       variant="icon"
       type="button"
-      aria-label={!mounted ? "Zmień motyw" : isDark ? "Włącz jasny motyw" : "Włącz ciemny motyw"}
+      aria-label={!mounted ? t("theme.change") : isDark ? t("theme.light") : t("theme.dark")}
       onClick={toggleTheme}
     >
       {!mounted ? <SunMoon className="size-4" /> : isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}