Languages and RTL

1import { LocaleProvider } from "@/components/dashral/lib/locale"
2import { id } from "@daypicker/react/locale"
3
4const messages = {
5  search: "Cari…",
6  rowsPerPage: "Baris per halaman",
7  pageOf: "Halaman {page} dari {total}",
8  rows: { other: "{count} baris" },
9}
10
11export function Providers({ children }: { children: React.ReactNode }) {
12  return (
13    <LocaleProvider locale="id-ID" messages={messages} dateLocale={id}>
14      {children}
15    </LocaleProvider>
16  )
17}

1// Arabic has six plural forms; give the ones your language uses, and always "other".
2rows: {
3  zero: "لا صفوف",
4  one: "صف واحد",
5  two: "صفان",
6  few: "{count} صفوف",
7  many: "{count} صفًا",
8  other: "{count} صف",
9}

1// app/layout.tsx — the language from next-intl (a cookie or the browser's), the kit's words from messages.kit
2import { getLocale, getMessages } from "next-intl/server"
3
4export default async function RootLayout({ children }: { children: React.ReactNode }) {
5  const locale = await getLocale()
6  const messages = await getMessages()
7  const dir = locale === "ar" ? "rtl" : "ltr"
8
9  return (
10    <html lang={locale} dir={dir}>
11      <body>
12        <NextIntlClientProvider>
13          <LocaleProvider locale={locale} dir={dir} messages={messages.kit}>
14            {children}
15          </LocaleProvider>
16        </NextIntlClientProvider>
17      </body>
18    </html>
19  )
20}

1// lib/i18n.ts — one entry per language
2import { ar, enUS, id, ja } from "@daypicker/react/locale"
3import GB from "country-flag-icons/react/3x2/GB"
4import JP from "country-flag-icons/react/3x2/JP"
5// …
6
7export const localeInfo = {
8  en: { label: "English", flag: GB, dir: "ltr", intl: "en-US", dateLocale: enUS },
9  id: { label: "Indonesia", flag: ID, dir: "ltr", intl: "id-ID", dateLocale: id },
10  ar: { label: "العربية", flag: SA, dir: "rtl", intl: "ar-u-nu-latn", money: "en-US", dateLocale: ar },
11  ja: { label: "日本語", flag: JP, dir: "ltr", intl: "ja-JP", dateLocale: ja },
12}

1messages/
2  en/              the source: every key, and their types
3    index.ts
4    kit.json       the UI kit's words
5    nav.json
6    settings.json
7    …
8  ja/              a copy of en/, translated
9    index.ts       export default { kit, nav, … } satisfies typeof en

1// Server components can't read the provider: give them the words and the locale.
2<Alert title="Tersimpan" onClose={hide} closeLabel="Tutup" />
3<Breadcrumb items={trail} moreLabel="Tampilkan {count} halaman lagi" />
4<BarList items={sources} locale="id-ID" />

1<div className="ms-2 ps-4 text-start border-s" />   // follows the direction
2<div className="ml-2 pl-4 text-left border-l" />    // always the left, even in Arabic
3
4<ArrowRight className="rtl:-scale-x-100" />          // arrows point the reading way