/* eslint-disable @typescript-eslint/camelcase */

<template>
  <NavBar
    appName="Tagboard Home"
    :user="user"
    :darkMode="darkMode"
    />
  <HelloWorld msg="Hello from Tagboard"></HelloWorld>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import {NavBar} from './components/NavBar/NavBar'
import HelloWorld from './components/HelloWorld.vue'

@Options({
  components: {
    NavBar,
    HelloWorld,
  },
  data: function () {
    return {
      darkMode: true,
      user: {
        displayName: 'muhajir',
        email: 'muhajir@tagboard.com',
        id: 263477,
        intercomUserHash: 'd68218b35b9b492f87e9be8191963a7867218a6d5c0f7e6bb84bbf7be5960a9b',
        avatar: 'https://avatars2.githubusercontent.com/u/8270779?s=460&u=d267b863ecbcf2be6fce0918b60480a8c35cdbe1&v=4'
      }
    }
  },
  methods: {
    tabClick (tab: string): void {
      this.activeTab = tab
    },
  },
})
export default class App extends Vue { }
</script>

<style lang="scss">
body, html {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: #303030
}
</style>