add en/vi language

components/map/GPSInfoPanel.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "@/hooks/use-i18n";
 import { convertToDMS, kmhToKnot } from "@/utils/geom";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useEffect, useRef, useState } from "react";
@@ -13,7 +14,7 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
   const [panelHeight, setPanelHeight] = useState(0);
   const translateY = useRef(new Animated.Value(0)).current;
   const blockBottom = useRef(new Animated.Value(0)).current;
-
+  const { t } = useI18n();
   useEffect(() => {
     Animated.timing(translateY, {
       toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
@@ -88,13 +89,13 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
         <View className="flex-row justify-between">
           <View className="flex-1">
             <Description
-              title="Kinh độ"
+              title={t("home.latitude")}
               description={convertToDMS(gpsData?.lat ?? 0, true)}
             />
           </View>
           <View className="flex-1">
             <Description
-              title="Vĩ độ"
+              title={t("home.longitude")}
               description={convertToDMS(gpsData?.lon ?? 0, false)}
             />
           </View>
@@ -102,12 +103,15 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
         <View className="flex-row justify-between">
           <View className="flex-1">
             <Description
-              title="Tốc độ"
+              title={t("home.speed")}
               description={`${kmhToKnot(gpsData?.s ?? 0).toString()} knot`}
             />
           </View>
           <View className="flex-1">
-            <Description title="Hướng" description={`${gpsData?.h ?? 0}°`} />
+            <Description
+              title={t("home.heading")}
+              description={`${gpsData?.h ?? 0}°`}
+            />
           </View>
         </View>
       </Animated.View>