feat: i18n with chinese translation

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	"recommendations": [
+		"lokalise.i18n-ally",
+		"esbenp.prettier-vscode",
+		"dbaeumer.vscode-eslint",
+		"gruntfuggly.todo-tree"
+	]
+}

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-	"tailwindCSS.classAttributes": ["class", "className", "classNames"]
+	"tailwindCSS.classAttributes": ["class", "className", "classNames"],
+	"i18n-ally.localesPaths": ["src/locales"],
+	"i18n-ally.sourceLanguage": "en-au",
+	"i18n-ally.keystyle": "nested"
 }

package.json

@@ -21,10 +21,13 @@
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",
 		"framer-motion": "^11.5.6",
+		"i18next": "^23.15.1",
+		"i18next-browser-languagedetector": "^8.0.0",
 		"ky": "^1.7.1",
 		"mutative": "^1.0.8",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-i18next": "^15.0.2",
 		"simple-zustand-devtools": "^1.1.0",
 		"sonner": "^1.5.0",
 		"zustand": "^4.5.5",

src/components/Calendar.tsx

@@ -1,6 +1,7 @@
 import { Button, Tooltip } from '@nextui-org/react';
 import clsx from 'clsx';
 import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { create } from 'zustand';
 
 import { WEEK_DAYS } from '../constants/week-days';
@@ -83,28 +84,30 @@ const CalendarHeader = ({
 	actions,
 	status,
 }: CalendarHeaderProps) => {
+	const { t } = useTranslation();
+
 	const actionButtons = [
 		{
 			icon: '⏪',
-			description: 'First week',
+			description: t('calendar.first-week'),
 			action: actions.goToStartWeek,
 			disabled: status.isStartWeek,
 		},
 		{
 			icon: '◀️',
-			description: 'Previous week',
+			description: t('calendar.previous-week'),
 			action: actions.prevWeek,
 			disabled: status.isStartWeek,
 		},
 		{
 			icon: '▶️',
-			description: 'Next week',
+			description: t('calendar.next-week'),
 			action: actions.nextWeek,
 			disabled: status.isEndWeek,
 		},
 		{
 			icon: '⏩',
-			description: 'Last week',
+			description: t('calendar.last-week'),
 			action: actions.goToEndWeek,
 			disabled: status.isEndWeek,
 		},

src/components/CourseModal.tsx

@@ -12,6 +12,7 @@ import {
 	TableHeader,
 	TableRow,
 } from '@nextui-org/react';
+import { useTranslation } from 'react-i18next';
 import { Fragment } from 'react/jsx-runtime';
 
 import { useGetCourseInfo } from '../data/course-info';
@@ -49,13 +50,15 @@ const MeetingsTime = ({
 	meetings: Meetings;
 	classType: string;
 }) => {
+	const { t } = useTranslation();
+
 	return (
 		<Table aria-label={`${classType} Meetings Table`}>
 			<TableHeader>
-				<TableColumn>Dates</TableColumn>
-				<TableColumn>Days</TableColumn>
-				<TableColumn>Time</TableColumn>
-				<TableColumn>Location</TableColumn>
+				<TableColumn>{t('course-modal.dates')}</TableColumn>
+				<TableColumn>{t('course-modal.days')}</TableColumn>
+				<TableColumn>{t('course-modal.time')}</TableColumn>
+				<TableColumn>{t('course-modal.location')}</TableColumn>
 			</TableHeader>
 			<TableBody>
 				{meetings.map((meeting, i) => (

src/components/Footer.tsx

@@ -1,15 +1,19 @@
+import { useTranslation } from 'react-i18next';
+
 export const Footer = () => {
+	const { t } = useTranslation();
+
 	return (
 		<footer className="text-center text-sm text-apple-gray-500">
 			<a
 				href="https://github.com/compsci-adl/mytimetable"
 				className="underline"
 			>
-				GitHub Repo
+				{t('footer.github')}
 			</a>
 			<span className="mx-1">&copy; {new Date().getFullYear()}</span>
 			<a href="https://csclub.org.au/" className="underline">
-				The University of Adelaide Computer Science Club
+				{t('footer.csclub')}
 			</a>
 		</footer>
 	);

src/components/Header.tsx

@@ -5,49 +5,94 @@ import {
 	NavbarBrand,
 	NavbarContent,
 	NavbarItem,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
 	Tooltip,
 } from '@nextui-org/react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useHelpModal } from '../helpers/help-modal';
 
+const LANGUAGES = [
+	{ code: 'en-AU', name: 'English', flag: '🇦🇺' },
+	{ code: 'zh-CN', name: '中文', flag: '🇨🇳' },
+];
+const DEFAULT_LANGUAGE = LANGUAGES[0];
+
+const HEADER_BUTTON_PROPS = {
+	size: 'sm',
+	isIconOnly: true,
+	variant: 'flat',
+	color: 'primary',
+	className: 'text-xl',
+} as const;
+
 export const Header = () => {
+	const { t, i18n } = useTranslation();
+	const currentLanguage =
+		LANGUAGES.find((l) => l.code === i18n.language) ?? DEFAULT_LANGUAGE;
+
 	const openHelpModal = useHelpModal((s) => s.open);
 
+	const [isChangeLanguageOpen, setIsChangeLanguageOpen] = useState(false);
+
 	return (
 		<Navbar isBordered maxWidth="xl" position="static">
 			<NavbarBrand>
 				<h1 className="font-bold text-inherit">My Timetable</h1>
 			</NavbarBrand>
 			<NavbarContent justify="end">
 				<NavbarItem>
-					<Tooltip content="Help" size="sm">
-						<Button
-							size="sm"
-							isIconOnly
-							variant="flat"
-							color="primary"
-							className="text-xl"
-							onClick={openHelpModal}
-						>
+					<Tooltip content={t('header.help')} size="sm">
+						<Button {...HEADER_BUTTON_PROPS} onClick={openHelpModal}>
 							❓
 						</Button>
 					</Tooltip>
 				</NavbarItem>
 				<NavbarItem>
-					<Tooltip content="Report a bug" size="sm">
+					<Tooltip content={t('header.report')} size="sm">
 						<Button
-							size="sm"
-							isIconOnly
-							variant="flat"
-							color="primary"
-							className="text-xl"
+							{...HEADER_BUTTON_PROPS}
 							as={Link}
 							href="mailto:[email protected]"
 						>
 							🐛
 						</Button>
 					</Tooltip>
 				</NavbarItem>
+				<NavbarItem>
+					<Popover
+						isOpen={isChangeLanguageOpen}
+						onOpenChange={(open) => setIsChangeLanguageOpen(open)}
+					>
+						<Tooltip
+							content={t('header.change-language')}
+							size="sm"
+							isDisabled={isChangeLanguageOpen}
+						>
+							<div>
+								<PopoverTrigger>
+									<Button {...HEADER_BUTTON_PROPS}>
+										{currentLanguage.flag}
+									</Button>
+								</PopoverTrigger>
+							</div>
+						</Tooltip>
+						<PopoverContent>
+							{LANGUAGES.map((language) => (
+								<Button
+									fullWidth
+									variant="light"
+									onClick={() => i18n.changeLanguage(language.code)}
+								>
+									{language.name} {language.flag}
+								</Button>
+							))}
+						</PopoverContent>
+					</Popover>
+				</NavbarItem>
 			</NavbarContent>
 		</Navbar>
 	);