feat: i18n

src/components/Calendar.tsx

@@ -177,7 +177,9 @@ const CalendarHeader = ({
 	);
 };
 
-const EndButtons = () => {
+const EndActions = () => {
+	const { t } = useTranslation();
+
 	const blockHeight = useCalendarHourHeight((s) => s.height);
 
 	const {
@@ -192,7 +194,7 @@ const EndButtons = () => {
 			className="absolute -bottom-[0.5rem] left-0 flex w-full items-center justify-center gap-4"
 			style={{ height: blockHeight + 'rem' }}
 		>
-			<Tooltip content="Copy to clipboard">
+			<Tooltip content={t('calendar.end-actions.copy')}>
 				<Button
 					variant="flat"
 					color="primary"
@@ -210,7 +212,7 @@ const EndButtons = () => {
 				className="font-semibold"
 				onPress={onReadyModalOpen}
 			>
-				Ready for Enrolment 🚀
+				{t('calendar.end-actions.ready')} 🚀
 			</Button>
 			<EnrolmentModal
 				isOpen={isReadyModalOpen}
@@ -429,7 +431,7 @@ export const Calendar = () => {
 				<CalendarBg currentWeek={currentWeek} />
 				<CalendarCourses courses={courses} currentWeek={currentWeek} />
 				{isDragging && <CalendarCourseOtherTimes currentWeek={currentWeek} />}
-				<EndButtons />
+				<EndActions />
 			</div>
 		</div>
 	);

src/components/EnrolmentModal.tsx

@@ -12,6 +12,7 @@ import {
 	ModalHeader,
 } from '@nextui-org/react';
 import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
 
 import { useDetailedEnrolledCourses } from '../data/enrolled-courses';
 
@@ -20,6 +21,8 @@ type ReadyModalProps = {
 	onOpenChange: (isOpen: boolean) => void;
 };
 export const EnrolmentModal = ({ isOpen, onOpenChange }: ReadyModalProps) => {
+	const { t } = useTranslation();
+
 	const enrolledCourses = useDetailedEnrolledCourses();
 	const isOnlyCourse = enrolledCourses.length === 1;
 
@@ -30,7 +33,7 @@ export const EnrolmentModal = ({ isOpen, onOpenChange }: ReadyModalProps) => {
 			size={isOnlyCourse ? 'xs' : '2xl'}
 		>
 			<ModalContent>
-				<ModalHeader>Ready for Enrolment</ModalHeader>
+				<ModalHeader>{t('calendar.end-actions.ready')}</ModalHeader>
 				<ModalBody className={clsx(!isOnlyCourse && 'grid grid-cols-2')}>
 					{enrolledCourses.map((c) => (
 						<Card key={c.id}>

src/helpers/export-calendar.ts

@@ -1,8 +1,11 @@
+import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
 import { useDetailedEnrolledCourses } from '../data/enrolled-courses';
 
 export const useExportCalendar = () => {
+	const { t } = useTranslation();
+
 	const enrolledCourses = useDetailedEnrolledCourses();
 	const copyText = async () => {
 		const res = enrolledCourses.map((c) => ({
@@ -15,7 +18,7 @@ export const useExportCalendar = () => {
 		const advertisement =
 			'Planned with MyTimetable\nhttps://mytimetable.csclub.org.au/';
 		await navigator.clipboard.writeText(resStr + '\n\n\n' + advertisement);
-		toast.success('Copied to clipboard!');
+		toast.success(t('calendar.end-actions.copy-success'));
 	};
 	return { copyText };
 };

src/locales/en-au.json

@@ -39,7 +39,12 @@
 			"November",
 			"December"
 		],
-		"immoveable-course": "Immoveable course"
+		"immoveable-course": "Immoveable course",
+		"end-actions": {
+			"copy": "Copy to clipboard",
+			"ready": "Ready for Enrolment",
+			"copy-success": "Copied to clipboard!"
+		}
 	},
 	"help": {
 		"title": "How to use MyTimetable",

src/locales/zh-cn.json

@@ -39,7 +39,12 @@
 			"十一月",
 			"十二月"
 		],
-		"immoveable-course": "此课程无法移动"
+		"immoveable-course": "此课程无法移动",
+		"end-actions": {
+			"copy": "复制到剪切板",
+			"ready": "准备选课",
+			"copy-success": "已成功复制到剪切板！"
+		}
 	},
 	"help": {
 		"title": "如何使用 MyTimetable",