🚧 work on ListCard #29

people/src/components/ListCard/ListCard.tsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import { Typography } from '@material-ui/core'
+import { 
+  ListCardGrid, ListCardContainer, 
+  ListCardContent, ListCardMedia,
+  ListCardSubContainer, ListCardContentContainer
+} from './ListCardStyles'
+import profilePic from '../../taiyr.png'
+
+const people = [
+  {
+    name: "Taiyr Begeyev",
+    email: "[email protected]",
+    college: "Krupp",
+    room: "KC-113",
+    major: "CS",
+    class: "2021"
+  },
+  {
+    name: "Taiyr Begeyev",
+    email: "[email protected]",
+    college: "Krupp",
+    room: "KC-113",
+    major: "CS",
+    class: "2021"
+  },
+  {
+    name: "Taiyr Begeyev",
+    email: "[email protected]",
+    college: "Krupp",
+    room: "KC-113",
+    major: "CS",
+    class: "2021"
+  }
+]
+
+class ListCard extends Component<{}, {}> {
+  public render() {
+    return (
+       <React.Fragment>
+         <ListCardGrid container spacing={8}>
+          {
+            people.map(person => (
+              <ListCardGrid item key={person.email} xs={12}>
+                <ListCardContainer>
+                  <ListCardSubContainer>
+                    <ListCardMedia 
+                      image={profilePic}
+                    />
+                    <ListCardContentContainer>
+                      <ListCardContent>
+                        <Typography
+                          component="h2" variant="h5"
+                        >
+                          {person.name}
+                        </Typography>
+                        <Typography></Typography>
+                      </ListCardContent>
+                    </ListCardContentContainer>
+                  </ListCardSubContainer>
+                </ListCardContainer>
+              </ListCardGrid>
+            ))
+          }
+         </ListCardGrid>
+       </React.Fragment>
+    );
+  }
+}
+
+export default ListCard;

people/src/components/ListCard/ListCardStyles.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Grid, Card, CardContent, CardMedia } from '@material-ui/core'
+
+export const ListCardGrid = styled(Grid)`
+	background-color: red;
+`
+
+export const ListCardContainer = styled(Card)`
+	&&& {
+		border-radius: 0.6rem;
+		padding: 1rem;
+	}
+`
+
+export const ListCardSubContainer = styled.div`
+	display: flex;
+	align-items: center;
+	height: 100%;
+`
+
+export const ListCardMedia = styled(CardMedia)`
+	&&& {
+		width: 128px;
+		height: 128px;
+		border-radius: 0.6rem;
+	}
+`
+
+export const ListCardContentContainer = styled(CardContent)`
+	&&& {
+		margin-left: 5%;
+	}
+`
+
+export const ListCardContent = styled.div`
+	display: flex;
+	align-items: flex-start;
+`
+
+
+