Homepage

README.md

@@ -19,6 +19,7 @@ Running project locally:
 - [React](https://react.dev/)
 - [Vite](https://vitejs.dev/)
 - [Font Awesome](https://fontawesome.com/)
+- [Material UI](https://mui.com/)
 
 ## Our Team
 

package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^6.1.0",

src/App.css

@@ -1,6 +1,3 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
 }

src/App.jsx

@@ -1,9 +1,23 @@
 import './App.css'
+import Header from './components/Header.jsx'
+import Main from './components/Main.jsx'
+import Footer from './components/Footer.jsx'
+import { useState } from 'react';
+
+const testData = [
+  {'id': 1, 'groupName': "Test1", 'moneyOwed':100, 'description': "This is a test description.", 'groupMembers': ["Member 1", "Member 2"]},
+  {'id': 2, 'groupName': "Test2", 'moneyOwed':400, 'description': "This is another test description.", 'groupMembers': ["Member 3", "Member 4"]},
+  {'id': 3, 'groupName': "Test3", 'moneyOwed':400, 'description': "This is another test description.", 'groupMembers': ["Member 3", "Member 4"]}
+];
 
 function App() {
+  const [groups, setGroups] = useState([...testData]);
+
   return (
     <>
-      <h1>Divvy Up</h1>
+      <Header />
+      <Main groups={groups} />
+      <Footer />
     </>
   )
 }

src/components/Footer.jsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons';
+
+const github = <FontAwesomeIcon icon={faGithub} />
+const linkedin = <FontAwesomeIcon icon={faLinkedin} />
+const twitter = <FontAwesomeIcon icon={faTwitter} />
+
+const linkSX = {
+    "&:hover":{color:'#76C57F'},
+    mx: 2,
+    fontWeight: "regular"
+}
+
+function Copyright() {
+  return (
+    <Typography variant="body2" sx={{ mt: 1 }}>
+      {'Copyright ©'}
+      &nbsp;
+      {new Date().getFullYear()}
+      &nbsp;
+      {'| Divvy Up'}
+    </Typography>
+  );
+}
+
+export default function Footer() {
+    return(
+        <Box component='section' sx={{ textAlign: 'center', backgroundColor: '#3B3B3B', color: 'white', py: 2 }}>
+            <Grid container justifyContent='center'>
+                <Grid size={3}>
+                    <Typography variant='h6'>GitHub Repository</Typography>
+                    <Box sx={{ pt: 0.5 }}>
+                        <Link href='https://github.com/chingu-voyages/v51-tier2-team-26' target='_blank' color='inherit' variant='h3' sx={linkSX}>{github}</Link>
+                    </Box>
+                </Grid>
+                <Grid size={3}>
+                    <Typography variant='h6'>Terms and Privacy</Typography>
+                    <Box sx={{ pt: 1.5 }}>
+                        <Link href='https://www.chingu.io/privacy' target='_blank' color='inherit' variant='b3' underline='hover' sx={linkSX}>Privacy Terms</Link>
+                    </Box>
+                </Grid> 
+                <Grid size={3}>
+                    <Typography variant='h6'>Social Media</Typography>
+                    <Box sx={{ pt: 0.5 }}>
+                        <Link href='https://www.linkedin.com/company/chingu-os/' target='_blank' color='inherit' variant='h3' sx={linkSX}>{linkedin}</Link>
+                        <Link href='https://twitter.com/ChinguCollabs' target='_blank' color='inherit' variant='h3' sx={linkSX}>{twitter}</Link>
+                    </Box>
+                </Grid>
+            </Grid>
+            <Copyright />
+        </Box>
+    )
+}

src/components/GroupDisplay.jsx

@@ -0,0 +1,32 @@
+// import MemberDisplay from './MemberDisplay';
+import Box from '@mui/material/Box';
+import { Typography } from '@mui/material';
+
+export default function GroupDisplay( { group }) {
+    const groupMembers = [...group.groupMembers]
+    // console.log(groupMembers);
+
+    return(
+        <Box display='flex' alignItems='center' sx={{ "&:hover":{border: '3px solid #0F861C'}, color: 'black', backgroundColor:'white', width: 1, height: 150, mt: 2, p:2, boxSizing: 'border-box', border:'1px solid gray', borderRadius: 4 }}>
+            <Box sx={{ height: 115, width: 115, backgroundColor: '#0F861C', borderRadius: 3 }}>
+                <Typography variant='h1' sx={{ color: 'white', textAlign:'center' }}>{group.groupName[0]}</Typography>
+            </Box>
+            <Box sx={{ width: 1, height: 1, ml: 2 }}>
+                <Box display='flex' justifyContent='space-between' alignItems='baseline' sx={{ mb: 1 }}>
+                    <Box display='flex' alignItems='baseline'>
+                        <Box sx={{ mr: 1 }}>
+                            <Typography variant='h5'>{group.groupName}</Typography>
+                        </Box>
+                        <Box sx={{ color:'gray', fontSize:'0.8em', fontStyle:'italic' }}>
+                            #{group.id < 10 ? '00'+group.id : '0'+group.id}
+                        </Box>
+                    </Box>
+                    <Box sx={{ backgroundColor:'#76C57F', px: 1, py:1/2, borderRadius: 3, fontWeight: 'bold' }}>
+                        ${group.moneyOwed}
+                    </Box>
+                </Box>
+                <Box>{group.description}</Box>
+            </Box>
+        </Box>
+    )
+}

src/components/Header.jsx

@@ -0,0 +1,40 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import logo from '../img/divvy-up-logo.png';
+
+export default function Header() {
+    return(
+        <Box component='section' display='flex' justifyContent='space-between' alignItems='center' sx={{ backgroundColor: '#3B3B3B', color: 'white', px:5, py:3 }}>
+            <img src={logo} alt='Divvy Up logo' height='140px' width='auto' />
+            <Box display='flex'>
+                <Box component='span' 
+                    sx={{ 
+                        backgroundColor: '#0F861C',
+                        border: 3,
+                        borderRight: 0,
+                        borderTopLeftRadius: 20,
+                        borderBottomLeftRadius: 20,
+                        pr:1,
+                        pl: 1.5,
+                        pb: 1,
+                    }}
+                >
+                    <Typography variant='h1' sx={{color:'white'}}>Divvy</Typography>
+                </Box>
+                <Box component='span' 
+                    sx={{ 
+                        backgroundColor: '#76C57F',
+                        border: 3,
+                        borderLeft: 0,
+                        borderTopRightRadius: 20,
+                        borderBottomRightRadius: 20,
+                        pr:1.5,
+                        pb:1,
+                    }}
+                >
+                    <Typography variant='h1' sx={{color:'white'}}>Up</Typography>
+                </Box>
+            </Box>
+        </Box>
+    )
+}

src/components/Main.jsx

@@ -0,0 +1,14 @@
+import GroupDisplay from './GroupDisplay';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+
+export default function Main({ groups }) {
+    return(
+        <Box sx={{ backgroundColor:'whitesmoke', width: 1, height: 600, px: 6, py: 4, boxSizing: 'border-box' }}>
+            <Button variant='contained'>Add New Group</Button>
+            {groups.map((group) => (
+                <GroupDisplay key={group.id} group={group} />
+            ))}
+        </Box>
+    )
+}