<template>
  <div class="page-breadcrumbs">
    <typo-text variant="title-bold">Breadcrumbs</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Breadcrumbs</typo-text>
      <div class="wrap-content">
        <div class="wrap-breadcrumbs">
          <breadcrumbs
            :list="listBreadcrumbs"
            @clickBreadcrumbs="clickBreadcrumbs"
          />
        </div>
        <pre>
{{
`<breadcrumbs
  :list="listBreadcrumbs"
  @clickBreadcrumbs="clickBreadcrumbs"
/>

listBreadcrumbs: [
  // index array 0 to icon home breadcrumbs
  {
    routeHome: "Home",
  },
  {
    label: "Pengguna",
    routeName: "Pengguna",
  },
  ...
]`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";
import Breadcrumbs from "@/components/Breadcrumbs";

export default {
  components: {
    TypoText,
    Breadcrumbs
  },
  data() {
    return {
      listBreadcrumbs: [
        {
          routeHome: "Home",
        },
        {
          label: "Pengguna",
          routeName: "Pengguna",
        },
        {
          label: "Pengguna",
          routeName: "Snackbar",
        },
        {
          label: "Pengguna",
          routeName: "Pengguna",
        },
        {
          label: "Pengguna",
          routeName: "Pengguna",
        },
        {
          label: "Tambah Pengguna",
          routeName: "Tambah Pengguna",
        },
      ],
    }
  },
  methods: {
    clickBreadcrumbs(value) {
      console.log(value);
    },
  },
}
</script>

<style lang="scss">
.page-breadcrumbs {

}
</style>