basic grid

src/routes/Team/Team.tsx

@@ -1,13 +1,31 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import Container from '@mui/material/Container'
-import Typography from '@mui/material/Typography';
-import { useTranslation } from 'react-i18next';
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { useTranslation } from 'react-i18next'
+import TeamMember from '@/types/TeamMember'
+import TeamMemberCard from './TeamMemberCard'
+import team from './team.json'
+
 
 const Team: FC = () => {
     const { t } = useTranslation();
 
+    const teamGrid: ReactNode[] = []
+    team.forEach((member: TeamMember) => {
+        teamGrid.push(<Grid item>
+            <TeamMemberCard member={member} />
+        </Grid>)
+    })
+
     return <Container style={{ padding: 32 }}>
-        <Typography variant="h1">{t('team.title')}</Typography>
+        <Stack spacing={2}>
+            <Typography variant="h1">{t('team.title')}</Typography>
+            <Grid container spacing={2}>
+                {teamGrid}
+            </Grid>
+        </Stack>
     </Container>
 }
 

src/routes/Team/TeamMemberCard.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import TeamMember from '@/types/TeamMember';
+
+interface TeamMemberCardProps {
+    member: TeamMember
+}
+
+const TeamMemberCard: FC<TeamMemberCardProps> = ({ member }) => {
+    return <Card>
+        <CardContent>{member.nameEN}</CardContent>
+    </Card>
+}
+
+export default TeamMemberCard

src/routes/Team/team.json

@@ -0,0 +1,44 @@
+[
+    {
+        "nameEN": "Ann Kilzer",
+        "nameJA": "キルザー·杏",
+        "titleEN": "Director",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Paty Cortez",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Maria Tenorio",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Krizza Bullecer",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Daria Vazhenina",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Anna Nakayama",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    },
+    {
+        "nameEN": "Aidan Fournier",
+        "nameJA": "",
+        "titleEN": "",
+        "image": "todo"
+    }
+]

src/types/TeamMember.ts

@@ -0,0 +1,9 @@
+type TeamMember = {
+    nameEN: string
+    nameJA?: string
+    titleEN: string
+    titleJA?: string
+    image: string
+}
+
+export default TeamMember