<script setup lang="ts">
import { ref, onMounted } from "vue";
import TaskList from "@/components/TaskList.vue";

const visible = ref<boolean>(false);

onMounted(() => {
    setTimeout(() => {
        visible.value = true;
    });
});
</script>

<template>
    <main :style="{ display: visible ? 'inherit' : 'none' }">
        <div class="hero bg-base-200 min-h-screen">
            <div class="hero-content text-center">
                <div class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md">
                    <h1 class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none">Tout Doux</h1>
                    <task-list />
                </div>
            </div>
        </div>
    </main>
</template>
