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

  import { useMenuStore } from '../stores/MenuStore';
  const MenuStore = useMenuStore();
  MenuStore.get_today();

  import BlueSkyComplete from './listings/BlueskyLinks.alt.vue';

  MenuStore.fetchSocialLinkList();
  const links = computed(() => {
    return MenuStore.social_links;
  });

  defineProps({
        limit: {
            type: Number,
            require: false
        }
    })

</script>
        
<template class="">
    <div class="p-2">
      <p class="text-xl">Recent readings:</p>
    </div>

    <div class="md:grid lg:grid md:justify-center lg:justify-center">
        <p class="text-lg">from <a href="https://bsky.app/profile/dreamfreely.org">BlueSky</a> & <a href="https://www.reddit.com/user/CultureClap/">Reddit</a></p>
        <table class="table-striped">
            <tr class="even:bg-blue-100 even:text-black odd:bg-grey-800" v-for="(item, index) in links">
                <BlueSkyComplete :item = "item" :index = "index" />
            </tr>
        </table>
    </div>
</template>

<style scoped>
    tr {
        border-radius: 25px;
    }
</style>