update,

03_source/frontend/src/sections/user/profile-home.tsx

@@ -21,6 +21,7 @@ import { _socials } from 'src/_mock';
 import { Iconify } from 'src/components/iconify';
 
 import { ProfilePostItem } from './profile-post-item';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -31,6 +32,7 @@ type Props = {
 
 export function ProfileHome({ info, posts }: Props) {
   const fileRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation();
 
   const handleAttach = () => {
     if (fileRef.current) {
@@ -40,21 +42,18 @@ export function ProfileHome({ info, posts }: Props) {
 
   const renderFollows = () => (
     <Card sx={{ py: 3, textAlign: 'center', typography: 'h4' }}>
-      <Stack
-        divider={<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />}
-        sx={{ flexDirection: 'row' }}
-      >
+      <Stack divider={<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />} sx={{ flexDirection: 'row' }}>
         <Stack sx={{ width: 1 }}>
           {fNumber(info.totalFollowers)}
           <Box component="span" sx={{ color: 'text.secondary', typography: 'body2' }}>
-            Follower
+            {t('Follower')}
           </Box>
         </Stack>
 
         <Stack sx={{ width: 1 }}>
           {fNumber(info.totalFollowing)}
           <Box component="span" sx={{ color: 'text.secondary', typography: 'body2' }}>
-            Following
+            {t('Following')}
           </Box>
         </Stack>
       </Stack>
@@ -63,7 +62,7 @@ export function ProfileHome({ info, posts }: Props) {
 
   const renderAbout = () => (
     <Card>
-      <CardHeader title="About" />
+      <CardHeader title={t('About')} />
 
       <Box
         sx={{
@@ -143,16 +142,16 @@ export function ProfileHome({ info, posts }: Props) {
         >
           <Fab size="small" color="inherit" variant="softExtended" onClick={handleAttach}>
             <Iconify icon="solar:gallery-wide-bold" width={24} sx={{ color: 'success.main' }} />
-            Image/Video
+            {t('Image/Video')}
           </Fab>
 
           <Fab size="small" color="inherit" variant="softExtended">
             <Iconify icon="solar:videocamera-record-bold" width={24} sx={{ color: 'error.main' }} />
-            Streaming
+            {t('Streaming')}
           </Fab>
         </Box>
 
-        <Button variant="contained">Post</Button>
+        <Button variant="contained">{t('Post')}</Button>
       </Box>
 
       <input ref={fileRef} type="file" style={{ display: 'none' }} />
@@ -161,7 +160,7 @@ export function ProfileHome({ info, posts }: Props) {
 
   const renderSocials = () => (
     <Card>
-      <CardHeader title="Social" />
+      <CardHeader title={t('Social')} />
 
       <Box sx={{ p: 3, gap: 2, display: 'flex', flexDirection: 'column', typography: 'body2' }}>
         {_socials.map((social) => (