<template>
<h1>Home</h1>
<section id="selector">
   <month-selector> 
   </month-selector> 
</section>
<div id="content">
    <section id="months">
        <h2> Mois </h2>
        <create-month></create-month>
        <months-list></months-list>
    </section>
    <section id="stats">
        <h2>Résumé</h2>
        <highlights></highlights> 
    </section>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue'
import MonthSelector from '../components/monthSelector.vue'
import Highlights from '../components/hightlights.vue'
export default {
    name: 'home',
    components: {
        MonthsList: MonthsList,
        CreateMonth: CreateMonth,
        MonthSelector: MonthSelector,
        highlights: Highlights,
        },
    data () {
        return {}
        },
    computed: {
        ...mapGetters({
            count: "datas/count",
        })
      },
      methods: {
        ...mapActions({
        })
      },
}
</script>

<style scoped>
#content {
    display: inline-flex;
    flex-direction: row;
    background-color: red;
    margin: 0;
}
#content > * {
    margin: 10px;
}
#months {
    flex-basis: 60%;
}
</style>
