add style elements and photo

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>
   )
 }

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%',
+  },
+}