<template>
  <div class="page-footer">
    <typo-text variant="title-bold">Footer</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Dashboard Footer</typo-text>
      <div class="wrap-content">
        <div>
          <dashboard-footer :list="listMenu" />
        </div>
        <pre>
{{
`<dashboard-footer :list="listMenu" />

listMenu: [
  {
    label: "Syarat Ketentuan",
    to: "", // for route app
    href: "http://library-frontend.pajak.io/"  // for external url
  },
  ...
]`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    DashboardFooter
  },
  data() {
    return {
      listMenu: [
        {
          label: "Syarat Ketentuan",
          to: "/syarat",
          href: ""
        },
        {
          label: "FAQ",
          to: "/faq",
          href: ""
        },
        {
          label: "Bantuan",
          to: "/bantuan",
          href: ""
        },
      ]
    }
  },
}
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.page-footer {
  .wrap-content {
    background: $neutral-1;
    padding: 75px 27px;
  }
}
</style>