meta/yukiotoko-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: date component updates in realtime

Browse Source
This commit is contained in:
metamethods 2025-01-03 00:06:08 -08:00
parent 827b7ef98a
commit 26103814ac
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/Date.svelte
View File

@ -1,13 +1,19 @@
<script lang="ts"> <script lang="ts">
const { date }: { date: Date } = $props(); const { date }: { date: Date } = $props();
const difference = new Date().getTime() / 1000 - date.getTime() / 1000;
const seconds = ~~(difference % 60); let currentDate = $state(Date.now());
const minutes = ~~(difference / 60) % 60; let difference = $derived(currentDate / 1000 - date.getTime() / 1000);
const hours = ~~(difference / 3600) % 24; let seconds = $derived(~~(difference % 60));
const days = ~~(difference / 86400); let minutes = $derived(~~(difference / 60) % 60);
let hours = $derived(~~(difference / 3600) % 24);
let days = $derived(~~(difference / 86400));
setInterval(() => {
currentDate = Date.now();
});
</script> </script>
<p class="group underline"> <span class="group underline">
<span class="group-hover:hidden"> <span class="group-hover:hidden">
about about
{#if minutes == 0} {#if minutes == 0}
@ -24,4 +30,4 @@
<span class="hidden group-hover:block"> <span class="hidden group-hover:block">
{date.toLocaleString()} {date.toLocaleString()}
</span> </span>
</p> </span>