teenybeanspreschoolcurriculum.com/src/components/Weeklyplan.vue

<template>
    <div>
        <div class="">
            <section class="container-fluid bg3">
            <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
                <div class="flex flex-col w-full justify-center">
                    <h1 class="text-blue-700 hero-text font-bold 2xl:w-10/12">Start Creating Weekly <span class="text-color-1">Lesson Plan</span></h1>
                </div>
                <div class="flex w-fit h-fit">
                    <img class="w-fit h-fit" src="/img/lesson-plan1c.png" alt="">
                </div>
            </div>
        </section>
            <section>
                <nav class="bg-white border-gray-200 py-2.5 rounded dark:bg-gray-900 bg3">
                    <div class="container flex flex-wrap items-center justify-between mx-auto px-4 xl:px-24">
                        <div class="w-full md:block md:w-auto" id="navbar-default container mx-auto">
                            <ul class="flex bg3 flex-col p-4 mt-4 md:gap-20 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                                <li><a href="/lesson-plan/dailyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Daily</p></a></li>
                                <li><a href="/lesson-plan/weeklyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Weekly</p></a></li>
                                <li><a href="/lesson-plan/monthlyplan"><p class="block py-2 pl-3 pr-4 text-color-1 text-xl rounded hover:bg-gray-100 hover:bg-transparent md:border-0 hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Monthly</p></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </section>
            <section class="container mx-auto px-4 xl:px-24">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-16 place-items-center mb-32 gap-16 ">
                    <div v-for="lessonplan in weeklyplan" :key="lessonplan.id">
                        <div @click="showLpModal(lessonplan.file)">
                                <!-- <div class="grid h-80 w-64 border-4 place-items-center">
                                    <a href=""><img class="" src="/img/svg/plus.svg" alt="">
                                        <h1 class="text-center">Add New Plan</h1></a></div> -->
                            <div class="grid gap-4"><img class="w-96 h-6/6 cursor-pointer" v-if="lessonplan.lesson_icon" :src="'https://management.beanstalkedu.com/assets/'+ lessonplan.lesson_icon" alt=""/></div>  
                        </div>
                                <!-- <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div>
                                <div class="grid h-72 w-64 border-4"><img class="h-80 w-64" src="/img/lessonplan.jpg" alt=""/></div> -->
                    </div>
                </div>
            </section>
        </div>
                           <!-- Youtube Modal -->
        <div @click="hideLpModal" v-if="lpModal" id="lpModal" class="flex justify-center lpModal ">
            <div class="modal-content">
                <span  @click="hideLpModal" class="close text-4xl font-bold cursor-pointer text-gray-200 border-2 rounded-full p-1">X</span>
                <div>
                    <img width="540"  :src="'https://management.beanstalkedu.com/assets/'+ file" alt=""/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    setup(){
        // const route = useRoute();

    },
    data() {
        return {
            page: null,
            lessonplan: null,
            weeklyplan: null,
            wsMath: null,
            wsWorld: null,
            vbfliteracy: null,
            isLoading: true,
            lpModal:false,
            file:''


        }
    },
    methods: { 
        showLpModal(file){
            this.lpModal=true
            this.file=file
        },
        hideLpModal(){
            this.lpModal=false
            // this.ytID=ytID
        }    
    },
    mounted: function () {
        fetch('https://management.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=weekly')
            .then(resp => resp.json())
            .then(data => {
                this.weeklyplan=data.data
                // console.log(this.weeklyplan)
            })
            
            }
       
        }
    
</script>

<style scoped>
.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
.font-20px {
    font-size: 20px;
}
@media screen and (min-width: 801px) {
  .hero-text {
    font-size: 50px;
    
  } 
}

@media screen and (max-width: 800px) {
  .hero-text {
    font-size: 25px;
    
  }
}
@media screen and (min-width: 801px) {
  .h1-text {
    font-size: 40px;
    
    
  } 
}

@media screen and (max-width: 800px) {
  .h1-text {
    font-size: 25px;
    
  }
}
.lpModal {
  /* display: none;  */
  position: fixed;
  width: 80%;
  z-index: 999991;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.text-color-1 {
    color: #7C4C23;
}

.menu2 {
    color: #212325;
}

</style>