Merge pull request #21 from mvhacks/fix-teams

Fix teams

src/App.css

@@ -68,6 +68,6 @@ h2 {
 }
 
 .team {
-  height: 600px;
-  background-color:darkkhaki;
+  /*height: 600px;*/
+  /*background-color:darkkhaki;*/
 }

src/App.tsx

@@ -9,6 +9,7 @@ import Schedule from "./components/Schedule";
 import InfoPage from './components/InfoPage';
 import Carousel from "./components/Carousel";
 import background from './images/background.png';
+import Team from "./components/Team";
 
 function App() {
   const home = useRef(null);
@@ -71,7 +72,7 @@ function App() {
             <Prospectus></Prospectus>
         </div>
         <div className="team" ref={team}>
-          <h2>TEAM</h2>
+          <Team></Team>
         </div>
       </div>
       <br />

src/components/Team.tsx

@@ -0,0 +1,173 @@
+import Table from '@mui/joy/Table';
+import Typography from '@mui/joy/Typography';
+import Button from "@mui/joy/Button";
+import blank from "../images/Team/blank.jpeg";
+import e from "../images/email.png";
+import g from "../images/github.png";
+
+function addPerson(name: string, image: string, role: string, link: string, type: string) {
+
+    let typeImage = type === "Github" ? g : e;
+    return { name, image, role, link, type, typeImage};
+
+}
+
+const directors = [
+    addPerson('Alexandra Markova', 'https://i.imgur.com/BBWqwhs.jpeg', 'Director', 'https://github.com/kitkatmia','Github'),
+    addPerson('Saahiti Bondalapati', 'https://i.imgur.com/16sqDdo.png', 'Outreach Director', '[email protected]','Email'),
+    addPerson('Arthur Cheong', blank, 'Emcee', '[email protected]','Email'),
+    addPerson('Emily Markova', 'https://i.imgur.com/wTrB5jy.jpeg', 'Tech Director', 'https://github.com/emilymarkova','Github'),
+    addPerson('Yhali Matot', blank, 'Sponsorship Director', '[email protected]','Email')
+];
+
+const tech = [
+    addPerson('Noam Kassoff', 'https://i.imgur.com/YZLuaM4.png', 'Member', 'https://github.com/noamkassoff','Github'),
+    addPerson('Milo Lin', 'https://i.imgur.com/QvoGuW5.jpeg', 'Member', '[email protected]','Email'),
+    addPerson('Emily Markova', 'https://i.imgur.com/wTrB5jy.jpeg', 'Director', '[email protected]','Email'),
+    addPerson('Mia Ravishankar', blank, 'Member', '[email protected]','Email'),
+    addPerson('Evelyn Yang', 'https://i.imgur.com/5b927dF.png', 'Member', '[email protected]','Email'),
+    addPerson('Jeremy Yu', 'https://i.imgur.com/VNapq9L.png', 'Member', 'https://github.com/jt31415','Github')
+];
+
+const outreach = [
+    addPerson('Saahiti Bondalapati', 'https://i.imgur.com/16sqDdo.png', 'Director', '[email protected]', 'Email'),
+    addPerson('Rohin Gupta', blank, 'Member', '[email protected]','Email'),
+    addPerson('Nikita Narrang', 'https://i.imgur.com/QC4s8O0.jpeg', 'Member', '[email protected]','Email'),
+    addPerson('Ishaan Sharma', blank, 'Member', '[email protected]','Email'),
+    addPerson('Mirabel Wang', blank, 'Member', '[email protected]','Email')
+];
+
+const sponsorship = [
+    addPerson('Kirati Bollineni', blank, 'Member', '[email protected]','Email'),
+    addPerson('Ethan Chen', blank, 'Member', '[email protected]','Email'),
+    addPerson('Owen Kim', blank, 'Member', '[email protected]','Email'),
+    addPerson('Yhali Matot', blank, 'Director', '[email protected]','Email'),
+    addPerson('Henry Shih', 'https://i.imgur.com/XSFwbkK.jpeg', 'Member', '[email protected]','Email'),
+    addPerson('Shankaran Srivatsa', blank, 'Member', '[email protected]','Email'),
+    addPerson('Kevin Thompson', blank, 'Member', '[email protected]','Email'),
+    addPerson('Ada Tulac', 'https://i.imgur.com/c26XLgw.jpeg', 'Member', '[email protected]','Email')
+];
+
+const teams = [
+    { name: "Directors", members: directors },
+    { name: "Tech", members: tech },
+    { name: "Outreach", members: outreach },
+    { name: "Sponsorship", members: sponsorship }
+];
+
+export default function Team() {
+    return (
+        <div style={{ padding: '5%' }}>
+            <Typography
+                level="h2"
+                sx={{
+                    color: '#ffffff',
+                    marginBottom: '2%',
+                    textAlign: "center"
+                }}
+            >
+                TEAM
+            </Typography>
+
+            {teams.map((team) => (
+
+                <Table
+                    sx={{
+                        backgroundColor: '#221a46',
+                        marginTop: '2%',
+                        color: 'white',
+                        border: '6px solid #c6add4',
+                        overflow: 'hidden',
+                        '& td, & th': { 
+                            padding: '12px 16px', 
+                            fontSize: '1.1rem', 
+                            wordWrap: 'break-word', 
+                            whiteSpace: 'normal' }
+                    }}
+                >
+                    <tbody key={team.name}> 
+                        <tr>
+                            <td style={{ 
+                                fontSize: '20px', 
+                                textTransform: 'uppercase', 
+                                padding: '12px 16px' 
+                            }}>  
+                                {team.name}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td> 
+                                <div style={{ 
+                                    display: 'flex', 
+                                    flexWrap: 'wrap', 
+                                    justifyContent: 'left',
+                                    gap: '16px' 
+                                }}>
+
+                                {team.members.map((member, i) => (
+                                    <div key={i} style={{ 
+                                        width: '180px', 
+                                        textAlign: 'center', 
+                                        justifyContent: 'center', 
+                                        alignItems: 'center' 
+                                    }}>
+                                        <img 
+                                            src={member.image} 
+                                            height="170px" 
+                                            width="170px" 
+                                            id="member" 
+                                            alt="member-image" 
+                                            style={{ objectFit: "cover"}} 
+                                        />
+                                        <div style={{ 
+                                            fontSize: '17px', 
+                                            fontWeight: 'bold',
+                                             color: 'white'
+                                        }}>
+                                            {member.name}
+                                        </div>
+                                        <div style={{ 
+                                            fontSize: '15px', 
+                                            color: 'grey'
+                                        }}>
+                                            {member.role}
+                                        </div>
+                                        <div>
+                                            <Button
+                                                sx={{ 
+                                                    borderRadius: "10px", 
+                                                    marginTop: "3%", 
+                                                    backgroundColor: '#c6add4', 
+                                                    height: "30px", 
+                                                    width:"170px",
+                                                    '&:hover': {backgroundColor: '#bb97cf'}
+                                                }}
+                                                id="link"
+                                                component="a"
+                                                href={member.link}
+                                            >
+                                                <img 
+                                                    src={member.typeImage} 
+                                                    height="25" 
+                                                    width="25" 
+                                                    id="member" 
+                                                    alt="member-link" 
+                                                    style={{paddingRight: "10px"}}
+                                                />
+                                                {member.type}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                ))}
+
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+            </Table>
+
+            ))}
+
+        </div>
+    );
+}