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

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

  import Bluesky from '../Bluesky.vue';
  import EventList from './EventList.vue';

</script>
        
<template class="p-4">
    <!-- <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex">
      <span class="md:float-left lg:float-left md:w-80 lg:w-80 p-4 m-4"> -->
    <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex justify-center">
      <span class="md:float-left lg:float-left md:w-80 lg:w-80">
        <Bluesky :limit="3" />
      </span> 
      <span class="justify-center pt-16 p-8 w-80 m-8">
          <img src="../../assets/profile.png" style="width:95%"/>
      </span>
      <span class="z-10" style="float:right">
        <p class="p-2 text-center text-xl">
          Upcoming Events (<a href="//www.digisnaxx.com">view all</a>)
        </p>
        <EventList :limit="6" />
      </span>
    </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>