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

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

  MenuStore.fetchSocialImages();
  const social_images = computed(() => {
    return MenuStore.social_images;
  });


  import BlogLead from '../blocks/BlogLead.vue';
  import ImageBlock from '../blocks/ImageBlock.vue';
  import MiniImageBlock from '../blocks/MiniImageBlock.vue';
  import BlogPosts from '../BlogPosts.vue';

</script>
        
<template class="">
    <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
        <div class="md:float-left lg:float-left">
            <BlogLead class="p-4" />
            <span class="p-4">
              <MiniImageBlock />
            </span>

          </div> 
        <span class="md:float-right lg:float-right md:w-80 lg:w-80 p-4">
          <BlogPosts class="p-8" :limit="8" />
        </span>
      </div>
</template>

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

    p {
        padding: .4em;
    }

    .lg\:w-80, .md\:w-80 {
      width:30rem
    }

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