feat(i18n): add internationalization with i18next and expo-localization
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigation, useRoute } from "@react-navigation/native";
|
||||
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
import type { RootStackParamList } from "@navigation/types";
|
||||
@@ -9,6 +10,8 @@ import { formatTime } from "@utils/formatTime";
|
||||
import { formatDistance } from "@utils/formatDistance";
|
||||
|
||||
export function PostSwimScreen() {
|
||||
const { t } = useTranslation("active-workout");
|
||||
const { t: tc } = useTranslation("common");
|
||||
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
|
||||
const route = useRoute<RouteProp<RootStackParamList, "PostSwim">>();
|
||||
const [summary, setSummary] = useState<{
|
||||
@@ -46,38 +49,38 @@ export function PostSwimScreen() {
|
||||
<View className="flex-1 bg-white p-4">
|
||||
<View className="items-center mb-8">
|
||||
<Text className="text-3xl mb-2">🏊</Text>
|
||||
<Text className="text-2xl font-bold text-slate-900 mb-1">Swim Complete!</Text>
|
||||
<Text className="text-slate-500">Great job getting in the water</Text>
|
||||
<Text className="text-2xl font-bold text-slate-900 mb-1">{t("swimComplete")}</Text>
|
||||
<Text className="text-slate-500">{t("greatJob")}</Text>
|
||||
</View>
|
||||
|
||||
{summary ? (
|
||||
<View className="gap-3 mb-8">
|
||||
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
|
||||
<Text className="text-slate-600">Distance</Text>
|
||||
<Text className="text-slate-600">{tc("distance")}</Text>
|
||||
<Text className="text-xl font-bold text-sky-600">
|
||||
{formatDistance(summary.distance)}
|
||||
</Text>
|
||||
</View>
|
||||
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
|
||||
<Text className="text-slate-600">Duration</Text>
|
||||
<Text className="text-slate-600">{tc("duration")}</Text>
|
||||
<Text className="text-xl font-bold text-sky-600">
|
||||
{formatTime(summary.duration)}
|
||||
</Text>
|
||||
</View>
|
||||
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
|
||||
<Text className="text-slate-600">Laps</Text>
|
||||
<Text className="text-slate-600">{tc("laps")}</Text>
|
||||
<Text className="text-xl font-bold text-sky-600">{summary.laps}</Text>
|
||||
</View>
|
||||
{summary.avgSwolf && (
|
||||
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
|
||||
<Text className="text-slate-600">Avg SWOLF</Text>
|
||||
<Text className="text-slate-600">{tc("avgSwolf")}</Text>
|
||||
<Text className="text-xl font-bold text-sky-600">{summary.avgSwolf}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View className="py-8 items-center">
|
||||
<Text className="text-slate-400">Loading summary...</Text>
|
||||
<Text className="text-slate-400">{t("loadingSummary")}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -85,7 +88,7 @@ export function PostSwimScreen() {
|
||||
onPress={() => navigation.popToTop()}
|
||||
className="bg-slate-900 rounded-2xl py-4 items-center"
|
||||
>
|
||||
<Text className="text-white font-bold text-lg">Done</Text>
|
||||
<Text className="text-white font-bold text-lg">{tc("done")}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user