<script setup>
  import { ref, onMounted, computed } from "vue";

  import { useMenuStore } from '../../stores/MenuStore';

  const MenuStore = useMenuStore();
  MenuStore.fetchDigiSnaxx();
  const snaxx = computed(() => {
    return MenuStore.snaxx;
  });

</script>
        
<template class="">
  <span class="p-2" v-for="(item, index) in snaxx.slice(0,1)">
      <p class="text-lg">{{ item.title }}</p> 
      <p>{{ item.excerpt }}</p>
      <a :href="item.url" class="">more snaxx</a>
  </span>
</template>

<style scoped>
    /* table {
      width: 70%
    } */

    .tcenter, th {
      text-align: center
    }

    .green {
      background-color: green; 
    }

    .yellow {
      background-color: yellow; 
    }
    
    table {
      border-collapse: separate;
    }
    
    td, p.border {
    /* background-color: #222; */
    border-collapse: separate;
    /* border-left: .1em solid #333; */
    /* border-right: .1em solid #333; */
    border-radius: 25px;
    padding: 2em;
    margin: 1em;
    }

    .social-data {
      display: block;
      /* float: right; */
      text-align: center;
      padding-right: 1em;
    }

    div > span {
      text-align: center;
      padding-right: 1em;
    }

    .link {
        border-radius: 25px;
        padding: .5rem;
        margin: .5rem;
        background-color: orange;
        color: #000;
        font-weight: bold;
    }
</style>