<script lang="ts" setup>
type Widget = {
  icon: string[]
  url: string
  title: string
}
// const welcomeWords = ['你好👋，很高兴认识你！']

const littleWidget: Widget[] = [
  {
    icon: ['fab', 'qq'],
    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
    title: "QQ",
  },
  {
    icon: ['fab', 'github-alt'],
    url: "https://github.com/Aurora1949",
    title: "Github",
  },
  {
    icon: ['fab', 'weibo'],
    url: "https://weibo.com/u/7923648952",
    title: "微博"
  },
  {
    icon: ['fab', 'steam-symbol'],
    url: "https://steamcommunity.com/id/cantyonion/",
    title: "Steam"
  }
]
</script>

<template>
  <div class="container my-16 flex w-full">
    <!-- 头像部分 -->
    <div class="hidden h-32 w-32 overflow-hidden rounded-full bg-white hover:animate-pulse sm:block">
      <img alt="" src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640">
    </div>

    <!--  文字部分  -->
    <div class="container flex flex-1 flex-col justify-between px-4 sm:px-8">
      <div class="text-4xl">Jeffrey Hsu</div>
      <div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
      <!--      <vue-typed-js :strings="['First text', 'Second Text']">-->
      <!--        <h1 class="typing"></h1>-->
      <!--      </vue-typed-js>-->
      <div class="flex gap-4 text-xl">
        <a v-for="item in littleWidget"
           :key="item.url" :href=item.url :title=item.title
           class="flex h-10 w-10 items-center justify-center rounded-full bg-green-400 text-white transition-all hover:scale-125">
          <font-awesome-icon :icon="item.icon"/>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>