<template>
  <Button @click="clickBtn">button</Button>
  <ActionBtn>ActionBtn</ActionBtn>
  <ActionBtn disabled>disabledBtn</ActionBtn>
  <div v-for="(n, i) in 7" :key="i">
    <Text :type="`H${i + 1}`">H {{ i + 1 }}</Text>
  </div>
  <IconCopyBtn />
  <IconShareBtn />
  <IconCloseBtn />

  <Header title="Test">
    <Button>button1</Button>
    <Button>button2</Button>
  </Header>

  <SideNav title="Assets">
    <img :src="testImg" />
  </SideNav>
  <SideNav title="Assets" selected>
    <img :src="testImg" />
  </SideNav>

  <SimpleModal title="Network" show>
    <img :src="testImg" />
  </SimpleModal>
</template>

<script>
import testImg from "@/assets/logo.png";
import Button from "./components/Buttons/Button.vue";
import ActionBtn from "./components/Buttons/ActionBtn.vue";
import Text from "./components/Text/Text.vue";
import IconCopyBtn from "./components/IconButtons/IconCopyBtn.vue";
import IconShareBtn from "./components/IconButtons/IconShareBtn.vue";
import IconCloseBtn from "./components/IconButtons/IconCloseBtn.vue";
import Header from "./components/Header/Header.vue";
import SideNav from "./components/Buttons/SideNav.vue";
import SimpleModal from "./components/Modals/SimpleModal.vue";

export default {
  name: "App",
  components: {
    Button,
    ActionBtn,
    Text,
    IconCopyBtn,
    IconShareBtn,
    IconCloseBtn,
    Header,
    SideNav,
    SimpleModal
  },
  setup() {
    const clickBtn = () => {
      alert("click");
    };

    return {
      testImg,
      clickBtn
    };
  }
};
</script>

<style>
body {
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
