<template>
  <div class="page-element">
    <typo-text variant="title-bold">Tab Menu</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Tab Menu</typo-text>
      <div class="wrap-example mb-3">
        <code>
          size=
          <select v-model="size">
            <option
              :value="item"
              v-for="(item, index) in listSize"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </code>
      </div>
      <div class="wrap-content">
        <tabmenu :list="listTab" :size="size" v-model="valueTab" />
        <pre>
{{
`<tabmenu :list="listTab" :size="size" />

listTab: [
  {
    label: "Formulir Induk",
    value: "Formulir Induk",
  },
  ...
],`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";
import Tabmenu from "@/components/Tabmenu";

export default {
  components: {
    BaseIcon,
    TypoText,
    Tabmenu,
  },
  data() {
    return {
      size: null,
      listSize: [null, "small"],
      valueTab: "",
      listTab: [
        {
          label: "Formulir Induk",
          value: "Formulir Induk",
        },
        {
          label: "Formulir AB",
          value: "Formulir AB",
        },
        {
          label: "Formulir ACNY",
          value: "Formulir AC",
        },
        {
          label: "Formulir ADK",
          value: "Formulir AD",
        },
        {
          label: "Formulir ADKKS",
          value: "Formulir AE",
        },
        {
          label: "Formulir ADKLLA",
          value: "Formulir AF",
        },
      ],
    };
  }
};
</script>

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

.page-element {
  .dashboard-header {
    width: auto;
  }

  .wrap-content {
    background: $neutral-1;
    padding: 75px 27px;

    .wrap-breadcrumbs {
      width: fit-content;
      background: $neutral-0;
      padding: 31px 53px;
    }
  }
}
</style>
