<template>
  <div class="w-full flex flex-col items-center">
    <div @click="uiStore.closeBox()" class="cursor-pointer">
      <logo />
    </div>
    <main>
      <boxes />
    </main>
  </div>
</template>

<script setup>
import { useUiStore } from '~/store/ui'
import { useDataStore } from '~/store/data'
const uiStore = useUiStore()

onMounted(async () => {
  const dataStore = useDataStore()
  await dataStore.loadData()
  uiStore.listBoxes()
})
</script>

<style>
.logo {
  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
}
</style>
