building team member card

WomenInSoftwareEngineeringJP · Jul 4, 2024 · 0114b2e · 0114b2e
1 parent 941f374
commit 0114b2e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/src/routes/Team/TeamMemberCard.tsx b/src/routes/Team/TeamMemberCard.tsx
@@ -1,15 +1,46 @@
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import TeamMember from '@/types/TeamMember';
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import TeamMember from '@/types/TeamMember'
+import i18next from 'i18next'
 
 interface TeamMemberCardProps {
     member: TeamMember
 }
 
 const TeamMemberCard: FC<TeamMemberCardProps> = ({ member }) => {
-    return <Card>
-        <CardContent>{member.nameEN}</CardContent>
+    const [name, setName] = useState(member.nameEN)
+    const [title, setTitle] = useState(member.titleEN)
+
+    useEffect(() => {
+        console.log(i18next.resolvedLanguage)
+        if (i18next.resolvedLanguage === 'en') {
+            setName(member.nameEN)
+            setTitle(member.titleEN)
+        } else if (i18next.resolvedLanguage === 'ja') {
+            setName(member.nameJA)
+            setTitle(member.titleJA)
+        }
+    }, [member])
+
+
+    return <Card sx={{ height: 420 }}>
+        <CardMedia
+            sx={{ height: 300, width: 300 }}
+            image={member.image}
+            title="green iguana"
+        />
+        <CardContent>
+            <Typography variant='h6'>
+                {name}
+            </Typography>
+            <Typography variant="subtitle1">
+                {title}
+            </Typography>
+
+        </CardContent>
     </Card>
 }
 

diff --git a/src/routes/Team/team.json b/src/routes/Team/team.json
@@ -3,42 +3,49 @@
         "nameEN": "Ann Kilzer",
         "nameJA": "キルザー·杏",
         "titleEN": "Director",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Paty Cortez",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Maria Tenorio",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Krizza Bullecer",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Daria Vazhenina",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Anna Nakayama",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     },
     {
         "nameEN": "Aidan Fournier",
         "nameJA": "",
         "titleEN": "",
+        "titleJA": "",
         "image": "todo"
     }
 ]
diff --git a/src/types/TeamMember.ts b/src/types/TeamMember.ts
@@ -1,8 +1,8 @@
 type TeamMember = {
     nameEN: string
-    nameJA?: string
+    nameJA: string
     titleEN: string
-    titleJA?: string
+    titleJA: string
     image: string
 }