<template>
  <h1>Food</h1>
  <div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
  <div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
  <div id="divComp">
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComp: 'food-kinds',
      foods: [
        { name: 'Pizza', imgUrl: 'img_pizza.svg' },
        { name: 'Apple', imgUrl: 'img_apple.svg' },
        { name: 'Cake', imgUrl: 'img_cake.svg' },
        { name: 'Fish', imgUrl: 'img_fish.svg' },
        { name: 'Rice', imgUrl: 'img_rice.svg' }
      ]
    }
  },
  provide() {
    return {
      foods: this.foods
    }
  }
}
</script>

<style scoped>
  .divBtn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    background-color: white;
    border: solid 2px #04AA6D;
    border-radius: 10px;
    font-family: Verdana,sans-serif;
    color: black;
    padding: 10px;
    margin: 10px;
  }
  .divBtn:hover {
    background-color: #04AA6D;
    color: white;
    cursor: pointer;
  }
  #divComp {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    width: 400px;
  }
</style>                  

<template>
    <h2>About</h2>
    <p>Food is anything we eat to give our bodies energy and help us grow strong and healthy. It comes from different sources, like plants, animals, and even fungi. There are many kinds of food, and they all have special nutrients that our bodies need to work properly.</p>
</template>
                  

<template>
    <h2>Different Kinds of Food</h2>
    <p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
    <div v-for="x in foods">
        <img :src="x.imgUrl">
        <p class="pName">{{ x.name }}</p>
    </div>
</template>

<script>
export default {
    inject: ['foods']
}
</script>

<style scoped>
    div {
        margin: 10px;
        padding: 10px;
        display: inline-block;
        width: 80px;
        background-color: #28e49f47;
        border-radius: 10px;
    }
    .pName {
        text-align: center;
        margin: 10px 0 0 0;
    }
    img {
        width: 100%;
    }
</style>                  

import { createApp } from 'vue'

import App from './App.vue'
import FoodAbout from './components/FoodAbout.vue'
import FoodKinds from './components/FoodKinds.vue'

const app = createApp(App)
app.component('food-about', FoodAbout)
app.component('food-kinds', FoodKinds)
app.mount('#app')