<template>
  <div class="demo-page">
    <p>This is a collection of components that can be shared across Watchtower Technologies front-end projects.</p>
    <template
      v-for="menuItem of menuItems"
    >
      <div
        :key="menuItem.to"
        class="example-block"
      >
        <h2>
          {{ menuItem.title }}
        </h2>
        <ul>
          <li
            v-for="child of menuItem.children"
            :key="child.to"
          >
            <RouterLink
              :to="child.to"
              class="link"
            >
              {{ child.title }}
            </RouterLink>
          </li>
        </ul>
      </div>
    </template>

    <br>
  </div>
</template>

<script>
  export default {
    name: 'Landing',
    props: {
      menuItems: {
        type: Array,
        default: () => [],
      },
    },
  };
</script>

<style scoped lang="scss">
  .link {
    font-size: 14px;
    line-height: 24px;
  }

  .example-block {
    margin-bottom: 20px;
  }
</style>
