Merge pull request #1 from csesoc/CHAOS-8-campaign-card

Chaos 8 campaign card

frontend/src/components/CampaignCard/campaignCard.styled.js

@@ -0,0 +1,11 @@
+// import { styled } from "@mui/material/styles";
+// import { Typography } from "@mui/material/";
+
+// export const BoldTitle = styled(Typography)`
+//   font-weight: 600;
+//   color: ${(props) => props.theme.palette.secondary.light};
+// `;
+
+// export const Subtitle = styled(Typography)`
+//   color: ${(props) => props.theme.palette.primary.light};
+// `;

frontend/src/components/CampaignCard/index.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import { Button, Card, CardContent, CardActions, CardMedia, Typography } from "@mui/material";
+
+const CampaignCard = (props) => {
+  const { title, description, startDate, endDate, img } = props;
+
+  return (
+    <Card sx={{ maxWidth: 275 }}>
+      <CardMedia
+        component="img"
+        height="140"
+        image={img}
+        alt={`campaign cover for ${title}`}
+      />
+      <CardContent>
+        <Typography variant="h5" component="div">
+          {title}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {`${startDate} - ${endDate}`}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Apply</Button>
+
+      </CardActions>
+    </Card>
+  );
+};
+
+CampaignCard.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  img: PropTypes.string,
+};
+
+export default CampaignCard;

frontend/src/pages/home/index.js

@@ -1,11 +1,41 @@
+import { Container } from "@mui/material";
 import React from "react";
+import CampaignCard from "../../components/CampaignCard";
+
+import DirectorDummy from './director.jpg';
+import SubcomDummy from './subcom.jpg';
 
 const Home = () => {
-  console.log("Home");
   return (
-    <div>
-      <h1>Home</h1>
-    </div>
+    <Container>
+      <h2>Your Campaigns</h2>
+      <CampaignCard
+        title="Subcom Recruitment"
+        description="Join the fam"
+        startDate="1 Jan 2022"
+        endDate="1 Feb 2022"
+        img={SubcomDummy}
+      />
+
+      <h2>Available Campaigns</h2>
+      <CampaignCard
+        title="Director Recruitment"
+        description="Join the fam"
+        startDate="1 Jan 2022"
+        endDate="1 Feb 2022"
+        img={DirectorDummy}
+      />
+
+      <h2>Past Campaigns</h2>
+      <CampaignCard
+        title="Subcom Recruitment"
+        description="Join the fam"
+        startDate="1 Jan 2022"
+        endDate="1 Feb 2022"
+        img={SubcomDummy}
+      />
+
+    </Container>
   );
 };
 

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+