From d9e6eb589bf9f3574710c475489ae8d2afe462b3 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sat, 29 Jul 2023 13:40:01 +0200
Subject: [PATCH] UI element for displaying days & at what time an event
 happened

---
 src/lib/components/DateSeparator.svelte | 41 +++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/lib/components/DateSeparator.svelte

diff --git a/src/lib/components/DateSeparator.svelte b/src/lib/components/DateSeparator.svelte
new file mode 100644
index 0000000..bffe6a1
--- /dev/null
+++ b/src/lib/components/DateSeparator.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let date: Date;
+
+	function convertDate() {
+		let [_, time] = date.toLocaleString('nb-NO').split(', ');
+		time = time.slice(0, time.length - 3);
+
+		const diffDays = Math.floor((new Date().getTime() - date.getTime()) / 86400000);
+		const d = diffDays == 0 ? 'Today' : String(diffDays) + ' days ago';
+		return `${d} at ${time}`;
+	}
+
+	const dateString = convertDate();
+</script>
+
+<div class="step">
+	<div class="sep" />
+
+	<span class="date">{dateString}</span>
+</div>
+
+<style lang="scss">
+	.step {
+		display: flex;
+		margin: 0;
+		height: 2rem;
+		align-items: center;
+
+		.sep {
+			margin: 0 1rem 0 1.5rem;
+			width: 2px;
+			height: 100%;
+			background-color: var(--highlight);
+		}
+
+		span.date {
+			font-size: 0.85rem;
+			color: var(--color-dim);
+		}
+	}
+</style>