Add event listings

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript"]
+}

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^2.29.1",
     "firebase": "9.8.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/components/AppContainer/AppContainer.css

@@ -1,5 +1,4 @@
 div {
   width: 100vw;
   height: 100vh;
-  background-color: red;
 }

src/components/EventListing/EventListing.css

@@ -0,0 +1,100 @@
+.event-listing {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+
+  width: 100%;
+  max-width: 873px;
+  height: 136px;
+
+  background: #ffffff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  border-radius: 5px;
+
+  overflow: hidden;
+  align-self: stretch;
+}
+
+.event-listing__date-snippet {
+  width: 93px;
+  height: 136px;
+
+  background: #20374a;
+  position: relative;
+
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.event-listing__date-snippet-text {
+  position: absolute;
+  left: 0%;
+  right: 0%;
+  top: 0%;
+  bottom: 0%;
+
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
+  /* or 140% */
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  color: #ffffff;
+}
+
+.event-listing__date-snippet-day {
+  font-size: 28px;
+}
+
+.event-listing__event-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px;
+  gap: 10px;
+
+  height: 100%;
+
+  box-sizing: border-box;
+
+  flex: 1;
+}
+
+.event-listing__title,
+.event-listing__subtitle,
+.event-listing__location {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  flex: none;
+  flex-grow: 0;
+}
+
+.event-listing__title {
+  font-size: 32px;
+  line-height: 38px;
+  color: #000000;
+  order: 0;
+}
+
+.event-listing__subtitle {
+  font-size: 24px;
+  line-height: 29px;
+  color: #777777;
+  order: 1;
+}
+
+.event-listing__location {
+  font-size: 24px;
+  line-height: 29px;
+  color: #4d4d4d;
+  order: 2;
+}

src/components/EventListing/EventListing.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./EventListing.css";
+import { format } from "date-fns";
+
+export const EventListing = ({title, start, end, location}) => {
+    return (
+        <div className="event-listing">
+            <div className="event-listing__date-snippet">
+                <p className="event-listing__date-snippet-text">
+                    {format(start, "LLL")}
+                    <p className="event-listing__date-snippet-day">{format(start, "d")}</p>
+                </p>
+            </div>
+            <div className="event-listing__event-content">
+                <p className="event-listing__title">{title}</p>
+                <p className="event-listing__subtitle">
+                    {format(start, "eee, LLL d")} to {format(end, "eee, LLL d")}
+                </p>
+                <p className="event-listing__location">{location}</p>
+            </div>
+        </div>
+    );
+};
+
+EventListing.propTypes = {
+    title: PropTypes.string.isRequired,
+    start: PropTypes.instanceOf(Date).isRequired,
+    end: PropTypes.instanceOf(Date).isRequired,
+    location: PropTypes.string.isRequired,
+};

src/components/EventListing/index.jsx

@@ -0,0 +1 @@
+export { PageContainer } from "./PageContainer";

src/components/PageContainer/PageContainer.css

@@ -1,5 +1,8 @@
-div {
+.page-container {
   width: 100%;
   height: 100%;
-  background-color: blue;
+  padding: 10px;
+  /* border-box makes it so that padding does not affect the width
+     of the element */
+  box-sizing: border-box;
 }

src/components/PageContainer/PageContainer.jsx

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import "./PageContainer.css";
 
 export const PageContainer = ({children}) => {
-    return (<div>{children}</div>);
+    return (<div className="page-container">{children}</div>);
 };
 
 PageContainer.propTypes = {
-    children: PropTypes.any
+    children: PropTypes.node
 };

src/main.css

@@ -1,8 +1,147 @@
-body {
+/*
+ Google fonts script for 'Inter - Bold 700' and 'Lato - Regular 400'
+ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Lato&display=swap');
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v5.0.1 | 20191019
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+menu,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
-  font-size: 16px;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+body {
+  line-height: 1;
+}
+menu,
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 
+body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

src/pages/LandingPage/AboutSection.css

@@ -1,12 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-
-  font-size: 16px;
-
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/pages/LandingPage/ContactSection.css

@@ -1,12 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-
-  font-size: 16px;
-
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/pages/LandingPage/EventsSection.css

@@ -0,0 +1,17 @@
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 32px 0px;
+  gap: 27px;
+}
+
+.events__heading {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 50px;
+  line-height: 60px;
+
+  color: #000000;
+}