frontend: add countdown on home page

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-26 03:07:30 +02:00
commit 1edc1690db
No known key found for this signature in database
2 changed files with 54 additions and 0 deletions

View file

@ -1,5 +1,18 @@
<script setup>
import { usePostsStore } from '@/stores/posts.js'
import Countdown from '@/components/Countdown.vue'
import { onMounted, ref } from 'vue'
const enableCountdown = ref(false)
const countdownDate = ref(new Date('2024-07-28 07:00:00'))
onMounted(() => {
const now = new Date().getTime()
const distance = countdownDate.value.getTime() - now
if (distance > 0) {
enableCountdown.value = true
}
})
const postsStore = usePostsStore()
</script>
@ -16,6 +29,10 @@ const postsStore = usePostsStore()
</div>
<div v-else>
<p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
<div class="mt-16 mx-4" v-if="enableCountdown">
<p>ça commence dans...</p>
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
</div>
</div>
</div>
</div>