<template>
  <div class="installation">
    <typo-text variant="title-bold">Installation</typo-text>
    <hr class="my-3" />
    <a href="https://www.npmjs.com/package/library-frontend-pajakio" target="__blank">
      https://www.npmjs.com/package/library-frontend-pajakio
    </a>
    <code>
      <pre>
1. Install

    npm install library-frontend-pajakio

2. Import Component

    import { TypoText, BaseButton, Dropdown, DatePicker, ... } from "library-frontend-pajakio";
    import "library-frontend-pajakio/dist/library-frontend-pajakio.css";

3. Import Color Pallete

    {{
      `<style lang="scss">
        @import "library-frontend-pajakio/src/assets/style/_color.scss";
    </style>`
    }}

4. Import Base style on App.vue

    import "library-frontend-pajakio/src/assets/style/base.scss";
      </pre>
    </code>
  </div>
</template>

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

export default {
  components: {
    TypoText
  }
}
</script>

<style lang="scss">
  .installation {
    pre {
      background: rgb(245, 246, 247);
      padding: 32px 44px;
    }
  }
</style>