<template>
	<main class="home theme-light">
        <h1>Braindrops</h1>
        <btn @click="onClick">View Drops</btn>
	</main>
</template>

<script setup>
import Btn from '@shared/Btn.vue'
import { useRouter } from 'vue-router';

const props = defineProps({
    manifest: Array,
})

const router = useRouter()

const onClick = () => {
    router.push(`/${props.manifest[0]}`)
}
</script>

<style lang="scss">
.home {
    background: var(--theme-layout);
    color: var(--theme-fg);
    height: 100vh;
    padding-top: rs(20px);
    padding-bottom: rs(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: rs(20px)
}
</style>
