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

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

  import MiniLinkListing from '../listings/MiniBlueskyLinks.vue';
  import LinkListing from '../listings/BlueskyLinks.vue';
  MenuStore.fetchSocialLinks();
  const links = computed(() => {
    return MenuStore.social_links;
  });

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

</script>
        
<template class="m-4">
    <div class="justify-center">
        <p>The following papers provide an accessible trauma-informed primer for social navigation in a multi-cultural world.</p>
	<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
            <span class="p-2 m-5 text-center">
              <a href="https://payhip.com/b/iFOLu">
                  <img src="../../assets/MEFull.png" width="400px" class="p-2 m-auto"/>
                  <h2 class="text-xl">Manifesting Empathy</h2>
              </a>
              <p class="text-strong">Free PDF</p>
            </span>

            <span class="p-2 m-5 text-center">
            <a href="https://payhip.com/b/5dHEp">
                <img src="../../assets/GlobalBoom.png" width="400px" class="p-2 m-auto"/>
                <h2 class="text-xl">Diversity Inverted</h2>
            </a>
            <p class="text-strong">$5 PDF</p>
            </span>
        </div>

    </div>
</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>