From 941f374e9b2e2eadd61755c5c34b5fe1df394b6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Thu, 4 Jul 2024 23:31:36 +0900
Subject: [PATCH] basic grid

---
 src/routes/Team/Team.tsx           | 26 +++++++++++++++---
 src/routes/Team/TeamMemberCard.tsx | 16 +++++++++++
 src/routes/Team/team.json          | 44 ++++++++++++++++++++++++++++++
 src/types/TeamMember.ts            |  9 ++++++
 4 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/Team/TeamMemberCard.tsx
 create mode 100644 src/routes/Team/team.json
 create mode 100644 src/types/TeamMember.ts

diff --git a/src/routes/Team/Team.tsx b/src/routes/Team/Team.tsx
index 8a001d2..e4bb1b2 100644
--- a/src/routes/Team/Team.tsx
+++ b/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>
 }
 
diff --git a/src/routes/Team/TeamMemberCard.tsx b/src/routes/Team/TeamMemberCard.tsx
new file mode 100644
index 0000000..32c95b1
--- /dev/null
+++ b/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
diff --git a/src/routes/Team/team.json b/src/routes/Team/team.json
new file mode 100644
index 0000000..01109e0
--- /dev/null
+++ b/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"
+    }
+]
diff --git a/src/types/TeamMember.ts b/src/types/TeamMember.ts
new file mode 100644
index 0000000..e274b97
--- /dev/null
+++ b/src/types/TeamMember.ts
@@ -0,0 +1,9 @@
+type TeamMember = {
+    nameEN: string
+    nameJA?: string
+    titleEN: string
+    titleJA?: string
+    image: string
+}
+
+export default TeamMember