chore: implement i18next

.gitignore

@@ -57,6 +57,7 @@ yarn-error.log*
 
 # Claude Code
 .claude/
+.omc/
 
 # Storybook
 *storybook.log

packages/ui/package.json

@@ -53,6 +53,9 @@
     "@youversion/platform-react-hooks": "workspace:*",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "i18next": "^26.0.4",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "react-i18next": "^17.0.2",
     "tailwind-merge": "3.3.1",
     "tw-animate-css": "1.4.0"
   },

packages/ui/src/components/verse-of-the-day.tsx

@@ -6,6 +6,8 @@ import {
   useVersion,
 } from '@youversion/platform-react-hooks';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import i18n from '@/i18n';
 import { AnimatedHeight } from '@/components/animated-height';
 import { BibleAppLogoLockup } from '@/components/bible-app-logo-lockup';
 import { LoaderIcon } from '@/components/icons/loader';
@@ -89,6 +91,7 @@ export function VerseOfTheDay({
   showBibleAppAttribution = true,
   size = 'default',
 }: VerseOfTheDayProps): React.ReactElement {
+  const { t } = useTranslation(undefined, { i18n });
   const day = React.useMemo(() => dayOfYear || getDayOfYear(new Date()), [dayOfYear]);
   const verseRef = React.useRef<HTMLDivElement>(null);
   const { data, loading: loadingVerseOfTheDay, error: errorVerseOfTheDay } = useVerseOfTheDay(day);
@@ -147,7 +150,7 @@ export function VerseOfTheDay({
               'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
             }
           >
-            Verse of The Day
+            {t('verseOfTheDay')}
           </p>
         </div>
         {showShareButton ? (

packages/ui/src/i18n/index.ts

@@ -0,0 +1,26 @@
+import i18next, { type i18n as I18nInstance } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+
+const defaultNS = 'translation';
+
+export const resources = {
+  en: { [defaultNS]: en },
+} as const;
+
+const i18n: I18nInstance = i18next.createInstance();
+
+void i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    defaultNS,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React already escapes
+    },
+  });
+
+export default i18n;

packages/ui/src/i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "verseOfTheDay": "Verse of The Day"
+}