i18n

src/client/ControllerCard.js

@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardHeader, CardContent, Divider, Grid, Box, Typography } from '@mui/material';
 import EnvChart from './EnvChart';
 import LevelChart from './LevelChart';
+import { useI18n } from './I18nContext';
 
 export default function ControllerCard({ controllerName, ports, range }) {
+    const { t } = useI18n();
     const [envData, setEnvData] = useState([]);
     const [portData, setPortData] = useState({});
 
@@ -56,7 +58,7 @@ export default function ControllerCard({ controllerName, ports, range }) {
                 {/* Environment Chart */}
                 <Box sx={{ height: 350, mb: 6 }}>
                     <Typography variant="h6" color="text.secondary" gutterBottom>
-                        Environment (Temp / Humidity)
+                        {t('controller.environment')}
                     </Typography>
                     <EnvChart data={envData} range={range} />
                 </Box>
@@ -75,7 +77,7 @@ export default function ControllerCard({ controllerName, ports, range }) {
                                 <Card variant="outlined" sx={{ bgcolor: 'background.paper' }}>
                                     <CardContent>
                                         <Typography variant="h6" gutterBottom>
-                                            {port.port_name || `Port ${port.port}`}
+                                            {port.port_name || `${t('controller.port')} ${port.port}`}
                                         </Typography>
                                         <Box sx={{ height: 250 }}>
                                             <LevelChart data={pData} isLight={isLight} isCO2={isCO2} range={range} />