From 009cf024442bcdc9bb4aead76d4f868880cf94cc Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Wed, 24 Jan 2024 01:48:26 +0100
Subject: [PATCH] Implement a switchatble timeago component

By default it still shows when the data was created relativly to now e.g. 12 hours ago
But when the user clicks it it will show the exact time it was created/edited
---
 src/lib/dates/TimeAgo.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/dates/TimeAgo.svelte b/src/lib/dates/TimeAgo.svelte
index dd944d3..0865938 100644
--- a/src/lib/dates/TimeAgo.svelte
+++ b/src/lib/dates/TimeAgo.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { i, type Token } from '../../languages/i18n';
+	import { currentLanguage } from '../../stores';
 
 	export let timestamp: number;
 	export let classes = '';
+	export let fullDate = false;
 
 	export let type: 'edited' | 'created' = 'created';
 
@@ -56,5 +58,11 @@
 	});
 </script>
 
-<!-- It's ok that this isn't in a I18n tag due to the interval-->
-<p class={classes}>{timeDifference}</p>
+<button on:click={() => (fullDate = !fullDate)} class="w-max">
+	{#if fullDate}
+		<p class={classes}>{new Date(timestamp).toLocaleString($currentLanguage)}</p>
+	{:else}
+		<!-- It's ok that this isn't in a I18n tag due to the interval-->
+		<p class={classes}>{timeDifference}</p>
+	{/if}
+</button>