<script setup lang="ts">

const pages = [
  {
    id: 'dashboard',
    name: 'Dashboard',
    component: '@components/content/Dashboard.vue',
  },
  {
    id: 'show',
    name: 'Trasmissioni',
    component: '@components/content/Show.vue',
  },
  {
    id: 'archive',
    name: 'Archivio',
    component: '@components/content/Archive.vue',
  },
  {
    id: 'playlist',
    name: 'Playlist',
    component: '@components/content/Playlist.vue',
  },
  {
    id: 'blocks',
    name: 'Blocchi dinamici',
    component: '@components/content/Blocks.vue',
  }
];
</script>

<template>
  <v-col>
    <v-btn
        v-for="page in pages"
        :key="page.id"
        size="large"
        @click="$emit('showPage', page)"
    >{{ page.name }}</v-btn>
  </v-col>
</template>

<style scoped>
  .v-col {
    width: 20vw;
    max-width:250px;
    display: flex;
    flex-direction: column;
  }
</style>