<template>
  <div class="mosquito-app">
    <router-view />
    <nav class="mos-nav">
      <div class="flex items-center justify-between">
        <RouterLink
          to="/"
          class="mos-nav-item"
          :class="{ active: route.path === '/' }"
        >
          <Icons name="home" class="mos-nav-icon" />
          <span>首页</span>
        </RouterLink>
        <RouterLink
          to="/share"
          class="mos-nav-item"
          :class="{ active: route.path === '/share' }"
        >
          <Icons name="share" class="mos-nav-icon" />
          <span>推广</span>
        </RouterLink>
        <RouterLink
          to="/rank"
          class="mos-nav-item"
          :class="{ active: route.path === '/rank' }"
        >
          <Icons name="trophy" class="mos-nav-icon" />
          <span>排行</span>
        </RouterLink>
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import Icons from './components/Icons.vue'

const route = useRoute()
</script>
