<script setup>
import { RouterLink } from "vue-router";
import MynaAcademicHat from "@mynaIcon/icons/academic-hat.svg";
</script>

<template>
  <div class="p-4 text-center">
    <h1 class="text-4xl font-bold text-blue-600">Hello Vue + Tailwind!</h1>
    <div class="flex gap-4 justify-center mt-4">
      <p>Myna UI icon example :</p>
      <MynaAcademicHat />
    </div>
    <div class="">
      <div class="flex gap-4 justify-center my-6 text-blue-800">
        <RouterLink class="hover:underline" to="/">Home</RouterLink>
        <RouterLink class="hover:underline" to="/about">About</RouterLink>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
