Add i18n support (#46)

apps/readest-app/src/components/AboutWindow.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import packageJson from '../../package.json';
 import WindowButtons from './WindowButtons';
+import { useTranslation } from '@/hooks/useTranslation';
 
 export const setAboutDialogVisible = (visible: boolean) => {
   const dialog = document.getElementById('about_window');
@@ -13,6 +14,7 @@ export const setAboutDialogVisible = (visible: boolean) => {
 };
 
 export const AboutWindow = () => {
+  const _ = useTranslation();
   return (
     <dialog id='about_window' className='modal'>
       <form method='dialog' className='modal-box w-96 max-w-lg p-4'>
@@ -30,7 +32,9 @@ export const AboutWindow = () => {
           </div>
           <h2 className='text-2xl font-bold'>Readest</h2>
           <p className='text-neutral-content text-sm'>Bilingify LLC</p>
-          <span className='badge badge-primary mt-2'>Version {packageJson.version}</span>
+          <span className='badge badge-primary mt-2'>
+            {_('Version {{version}}', { version: packageJson.version })}
+          </span>
         </div>
 
         <div className='divider'></div>
@@ -55,7 +59,7 @@ export const AboutWindow = () => {
           <p className='text-neutral-content mt-2 text-xs'>
             Source code is available at{' '}
             <a
-              href='https://github.com/chrox/readest'
+              href='https://github.com/readest/readest'
               target='_blank'
               rel='noopener noreferrer'
               className='text-blue-500 underline'

apps/readest-app/src/components/Alert.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { useTranslation } from '@/hooks/useTranslation';
 
 const Alert: React.FC<{
   title: string;
@@ -7,6 +8,7 @@ const Alert: React.FC<{
   onClickCancel: () => void;
   onClickConfirm: () => void;
 }> = ({ title, message, onClickCancel, onClickConfirm }) => {
+  const _ = useTranslation();
   return (
     <div
       role='alert'
@@ -37,10 +39,10 @@ const Alert: React.FC<{
       </div>
       <div className='flex space-x-2'>
         <button className='btn btn-sm' onClick={onClickCancel}>
-          Cancel
+          {_('Cancel')}
         </button>
         <button className='btn btn-sm btn-warning' onClick={onClickConfirm}>
-          Confirm
+          {_('Confirm')}
         </button>
       </div>
     </div>

apps/readest-app/src/components/Spinner.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
 
 const Spinner: React.FC<{
   loading: boolean;
 }> = ({ loading }) => {
+  const _ = useTranslation();
   if (!loading) return null;
 
   return (
@@ -11,7 +13,7 @@ const Spinner: React.FC<{
       role='status'
     >
       <span className='loading loading-dots loading-lg'></span>
-      <span className='hidden'>Loading...</span>
+      <span className='hidden'>{_('Loading...')}</span>
     </div>
   );
 };