initial event page

src/components/event.js

@@ -1,10 +1,43 @@
 import * as React from "react"
+import * as styles from "./event.module.css"
+import Seo from "../components/seo"
+import { graphql } from "gatsby"
+import { FaMapMarkerAlt, FaCalendarAlt } from "react-icons/fa"
 
-const Event = () => {
+export const query = graphql`
+  query($id: String!) {
+    sanityEvent(_id: { eq: $id }) {
+      _createdAt(formatString: "DD. MMMM, YYYY", locale: "nb_NO")
+      title
+      location
+      date(locale: "nb_NO", formatString: "dddd D. MMM Y")
+      slug {
+        current
+      }
+      description
+    }
+  }
+`
+
+const Event = ({ data }) => {
   return (
-    <div>
-      <p>Ingenting å se her... enda</p>
-    </div>
+    <>
+      <Seo title={data.sanityEvent.title} />
+      <div className={styles.container}>
+        <div className={styles.event}>
+          <h1>{data.sanityEvent.title}</h1>
+          <div className={styles.metadata}>
+            <FaMapMarkerAlt />
+            <p>{data.sanityEvent.location}</p>
+          </div>
+          <div className={styles.metadata}>
+            <FaCalendarAlt />
+            <p>{data.sanityEvent.date}</p>
+          </div>
+          <p className={styles.description}>{data.sanityEvent.description}</p>
+        </div>
+      </div>
+    </>
   )
 }
 

src/components/event.module.css

@@ -0,0 +1,36 @@
+body {
+  display: grid;
+  place-content: center;
+  min-height: none;
+}
+
+.container {
+  display: grid;
+  place-items: center;
+  margin: 1rem;
+}
+
+.event {
+  display: grid;
+  max-width: 60ch;
+}
+
+.event > h1 {
+  text-align: center;
+  text-decoration: underline;
+  text-decoration-color: var(--main-color);
+  margin-bottom: 1rem;
+}
+
+.metadata {
+  display: grid;
+  place-content: stretch;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  align-items: center;
+  font-weight: 100;
+}
+
+.description {
+  margin-top: 1rem;
+}