<template>
  <section class="author">
    <img :src="author.avatar" alt="avatar" class="avatar" />
    <h2 class="name">{{ author.name }}</h2>
    <p class="intro">{{ author.intro }}</p>
    <nav class="links">
      <a
        :href="item.link"
        :key="item.name"
        class="item"
        rel="noreferrer"
        target="_blank"
        v-for="item of $themeConfig.links"
      >
        <Icon :name="item.name" />
      </a>
    </nav>
  </section>
</template>

<script>
export default {
  name: 'Author',
  computed: {
    author() {
      return this.$themeConfig.author;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@theme/styles/_mixins.styl';

.author {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: space(2);
  max-width: 300px;

  .avatar {
    square(64px);
    rounded(50%);
  }

  .name {
    font('xxl');
    color: var(--fg-color-1);
    margin-top: space();
    text-align: center;
  }

  .intro {
    margin-top: space();
    padding: 0 space(2);
    width: 100%;
    text-align: center;
    word-break: break-all;
  }
}

.links {
  font('xxl');
  display: flex;
  justify-content: center;
  align-items: center;
  padding: space() 0;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font('xl');
    cursor: pointer;
    rounded();

    &:hover {
      background: var(--bg-hover);
    }
  }
}
</style>
