<template>
  <div class="flex flex-col text-xs opacity-80 mx-3 mt-1">
    <div class="flex flex-wrap gap-1.5">
      <span class="font-bold">The Solar Network</span>
      <span class="font-bold">·</span>
      <span>FloatingIsland</span>
    </div>
    <div class="flex flex-wrap gap-1.5">
      <a class="link" target="_blank" href="https://solsynth.dev/terms">
        Terms of Services
      </a>
      <span class="font-bold">·</span>
      <a class="link" target="_blank" href="https://status.solsynth.dev">
        Service Status
      </a>
      <span class="font-bold">·</span>
      <a
        class="link"
        target="_blank"
        href="https://solian.app/swagger/index.html"
      >
        API
      </a>
    </div>
    <p class="mt-2 opacity-80">
      The FloatingIsland do not provides all the features the Solar Network has,
      for further usage, see <a href="https://web.solian.app" class="font-bold underline">Solian</a>
    </p>
  </div>
</template>

<style scoped>
.link:hover {
  text-decoration: underline;
}
</style>
