Add Event Section

Author: natesabrown

src/assets/icons/calendar.svg

@@ -1,14 +1,85 @@
 import React from 'react';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
 import { Container, Card, SectionHeading } from 'components/common';
-import { Wrapper, Grid, Item, Content } from './styles';
-import jg from 'assets/images/jgonzales_from_unsplash.jpg';
+import { Wrapper, SmallWrapper, Grid, Item, EventsHeader, AttributeItem, EventImage} from './styles';
+import funinthesun from 'assets/images/funinthesun.jpeg'
+import opendataday from 'assets/images/opendataday.png'
+import codeforthecount from 'assets/images/codeforthecount.jpeg'
+import pinMarker from 'assets/icons/pinMarker.svg';
+import calendar from 'assets/icons/calendar.svg';
 
-export function Events() {
-    return (
-        <Wrapper as={Container} id="events">
-            <SectionHeading>Events</SectionHeading>
 
-        </Wrapper>
+export const Events = () => (
+<Wrapper as={Container} id="events">
+    <SectionHeading>Events</SectionHeading>
+    <SmallWrapper>
+    <EventsHeader> 
+      <h2>
+        Upcoming Events  
+      </h2>
+      <hr></hr>
+    </EventsHeader>
+    <Grid>
+        <EventCard
+        url="#"
+        name="Example Event"
+        time="Sunday, March 16 2021"
+        location="Dallas, TX"
+        description="This is example text for a hypothetical fun event hosted by CFD"
+        image={funinthesun}
+        />
+    </Grid>
+    </SmallWrapper>
+
+    <SmallWrapper>
+    <EventsHeader> 
+      <h2>
+        Past Events  
+      </h2>
+      <hr></hr>
+    </EventsHeader>
+    <Grid>
+    <EventCard
+    url="https://www.meetup.com/Code-for-Dallas/events/268938364/"
+    name="DFW Open Data Day 2020"
+    time="Saturday, March 6 2020"
+    location="UNT at Frisco"
+    description="An event where we coded for city governments, using open and public data to gain valuable insights and do cool things."
+    image={opendataday}
+    />
+    <EventCard
+    url="https://www.meetup.com/Code-for-Dallas/events/267278061/"
+    name="Creatives for the Count"
+    time="Thursday, January 9 2020"
+    location="Dallas, TX"
+    description="Creatives from around the Dallas area meet up and create cool resources to promote the 2020 census."
+    image={codeforthecount}
+    />
+    </Grid>
+    </SmallWrapper>
+</Wrapper>
+);
+
+function EventCard(props) {
+    return (
+      <Item as="a" href={props.url} target="_blank" rel="noopener noreferrer">
+  
+        <Card>
+          {/* <img style={{borderRadius: "50%", width: "50%"}} src={props.thumbnail} alt={"Picture of " + props.name} /> */}
+          <h3>{props.name}</h3>
+          <AttributeItem>
+            <img src={calendar} alt="calendar" />
+            {props.time}
+          </AttributeItem>
+          <AttributeItem>
+            <img src={pinMarker} alt="pin marker"/>
+            {props.location}
+          </AttributeItem>
+          <p>{props.description}</p>
+          <EventImage>
+          <img src={props.image}></img>
+          </EventImage>
+        </Card>
+      </Item>
+  
     )
-}
+  }

src/assets/icons/pinMarker.svg

@@ -4,18 +4,41 @@ export const Wrapper = styled.div`
   padding: 2rem 0;
 `;
 
+export const SmallWrapper = styled.div`
+  padding: 1rem 0;
+`;
+
+export const EventsHeader = styled.div`
+  text-align: center;
+  h2 {
+    margin: 0;
+    margin: 0 auto;
+    color:white;
+    background-color: #6FACD5;
+    padding: 1em;
+    margin-bottom: 2rem;
+    border-radius: 2rem;
+    min-width: 3em;
+    display: inline-block;
+  }
+  
+`;
+
 export const Grid = styled.div`
   display: grid;
   align-items: center;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 8fr;
   gap: 1.2rem 1.2rem;
+  p {
+    margin-top: 2em;
+  }
 
   @media (max-width: 960px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (max-width: 680px) {
+  @media (max-width: 800px) {
     grid-template-columns: 1fr;
   }
 `;
@@ -25,6 +48,7 @@ export const Item = styled.div`
   height: 100%;
   overflow: hidden;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
+  color: inherit;
 
   h4 {
     color: #212121;
@@ -35,27 +59,37 @@ export const Item = styled.div`
   }
 `;
 
-export const Content = styled.div`
-  padding: 1rem 0;
-`;
+export const AttributeItem = styled.div`
+margin-bottom: 12px;
 
-export const Stats = styled.div`
-  display: flex;
-  align-items: center;
+img {
+  width: 14px;
+  margin-right: 12px;
+  margin-bottom: 0px;
+}
+`
 
-  div {
-    display: flex;
-    &:first-child {
-      margin-right: 0.5rem;
-    }
+export const EventImage = styled.div`
+height: 368px;
+text-align: center;
+position: relative;
 
-    img {
-      margin: 0;
-    }
+img {
+  max-width: none;
+  height: inherit;
+  transition: height 0.5s ease-in-out, filter 0.5s ease-in-out;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%) 
+}
 
-    span {
-      color: #000;
-      margin-left: 0.5rem;
-    }
-  }
-`;
+img:hover {
+  height: 280px;
+  filter: brightness(50%);
+}
+
+}
+`