From 26cb79aedb7f188b9b236c0f6c036aad26f466dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Sverre=20Lien=20Sell=C3=A6g?=
 <jorgen@guut.org>
Date: Mon, 25 May 2020 15:15:40 +0200
Subject: [PATCH] add style elements and photo

---
 src/Events.js | 27 +++++++++++++++++++--------
 src/style.js  | 21 +++++++++++++++++++++
 2 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 src/style.js

diff --git a/src/Events.js b/src/Events.js
index ab02711..e20deed 100644
--- a/src/Events.js
+++ b/src/Events.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'preact/hooks'
+import style from './style.js'
 
 const endpoint = 'https://kultar.sout.no/events/'
 const fetch_options = {}
@@ -75,27 +76,35 @@ function Links({ event_id, ticket_url }) {
   return <Facebook event_id={event_id} />
 }
 
+function EventImage({ images }) {
+  const { square = null } = images
+  return (
+    <img style={style.EventImage} src={`https://kultar.sout.no/${square}`} />
+  )
+}
+
 function EventCard({ event }) {
   const { name, location, date, ticket_url, event_id } = event
   const { start: start_date } = date
   return (
-    <div>
+    <span style={style.EventCard}>
       <h3>{name}</h3>
       <Time date={new Date(start_date)} />
       <Links ticket_url={ticket_url} event_id={event_id} />
       <Location location={location} />
-    </div>
+    </span>
   )
 }
 
 function Event({ event, index }) {
   const isFirstEvent = index === 0
+  const { images } = event
 
   return (
-    <>
+    <div style={style.Event}>
+      <EventImage images={images} />
       <EventCard event={event} />
-      <hr />
-    </>
+    </div>
   )
 }
 
@@ -117,10 +126,12 @@ export default function Events() {
   }
 
   return (
-    <>
+    <div style={style.Events}>
       {events.map((event, index) => (
-        <Event event={event} index={index} />
+        <>
+          <Event event={event} index={index} />
+        </>
       ))}
-    </>
+    </div>
   )
 }
diff --git a/src/style.js b/src/style.js
new file mode 100644
index 0000000..eadca00
--- /dev/null
+++ b/src/style.js
@@ -0,0 +1,21 @@
+export default {
+  Events: {},
+  Event: {
+    display: 'flex',
+    'border-top': '1px solid rgba(0, 0, 0, 0.1)',
+    'border-bottom': '1px solid rgba(255, 255, 255, 0.3)',
+    'padding-top': '4px',
+  },
+  EventImage: {
+    width: '168px',
+    height: '168px',
+  },
+  EventCard: {
+    'padding-left': '8px',
+  },
+  hr: {
+    border: 0,
+    height: 0,
+    width: '100%',
+  },
+}