Jazykové verzie (i18n)

EOS Hub podporuje viacjazyčné rozhranie pomocou knižnice next-intl. Momentálne sú dostupné dva jazyky:

• Angličtina (English) -- en
• Slovenčina (Slovak) -- sk

Prepínanie jazykov

Používatelia môžu prepnúť jazyk kedykoľvek pomocou prepínača jazykov v navigácii. Vybraný jazyk sa uloží do preferencií používateľa a zostane aktívny pri ďalších návštevách.

Technická implementácia

Štruktúra prekladov

Jazykové súbory sa nachádzajú v priečinku src/messages/:

src/messages/
├── en.json    # Anglické preklady
└── sk.json    # Slovenské preklady

Každý súbor obsahuje štruktúrované preklady organizované podľa funkčných oblastí:

{
  "common": {
    "save": "Uložiť",
    "cancel": "Zrušiť",
    "delete": "Odstrániť"
  },
  "meetings": {
    "title": "Stretnutia",
    "create": "Vytvoriť stretnutie"
  },
  "scorecard": {
    "title": "Scorecard",
    "addMeasurable": "Pridať ukazovateľ"
  }
}

Použitie v komponentoch

import { useTranslations } from 'next-intl';

export function MeetingHeader() {
  const t = useTranslations('meetings');

  return <h1>{t('title')}</h1>;
}

Routing

EOS Hub používa routing s prefixom jazyka:

• /en/dashboard -- anglická verzia dashboardu
• /sk/dashboard -- slovenská verzia dashboardu

Konfigurácia routingu je v src/lib/i18n.ts:

export const locales = ['en', 'sk'] as const;
export const defaultLocale = 'en';

Pridanie nového jazyka

Ak chcete pridať nový jazyk:

1. Vytvorte nový súbor prekladov v src/messages/ (napr. cs.json)
2. Pridajte locale do konfigurácie v src/lib/i18n.ts
3. Pridajte locale do middleware v src/middleware.ts
4. Preložte všetky kľúče z existujúceho jazykového súboru

TIP

Ako základ pre nový jazyk použite anglický súbor en.json -- obsahuje všetky kľúče.

Príklad pridania češtiny

// src/lib/i18n.ts
export const locales = ['en', 'sk', 'cs'] as const;

Formátovanie

next-intl automaticky spracováva:

• Dátumy a časy -- lokalizované formáty
• Čísla -- oddeľovače tisícov a desatinných miest
• Pluralizácia -- správne tvary pre rôzne počty

const t = useTranslations('rocks');

// Pluralizácia
t('count', { count: 5 }); // "5 rocks" / "5 cieľov"

// Formátovanie dátumu
t('dueDate', { date: new Date() }); // lokalizovaný dátum

Ďalšie kroky

• Témy a farebné schémy -- vizuálne prispôsobenie
• Konfigurácia -- ďalšie nastavenia