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
}
+function EventImage({ images }) {
+ const { square = null } = images
+ return (
+
+ )
+}
+
function EventCard({ event }) {
const { name, location, date, ticket_url, event_id } = event
const { start: start_date } = date
return (
-
+
{name}
-
+
)
}
function Event({ event, index }) {
const isFirstEvent = index === 0
+ const { images } = event
return (
- <>
+
+
-
- >
+
)
}
@@ -117,10 +126,12 @@ export default function Events() {
}
return (
- <>
+
{events.map((event, index) => (
-
+ <>
+
+ >
))}
- >
+
)
}
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%',
+ },
+}