<script setup lang="ts">
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
</script>

<template>
  <IonPage>
    <IonTabs>
      <IonRouterOutlet />
      <IonTabBar slot="bottom" class="tabbar">
        <IonTabButton tab="riwa" href="/layout/riwa">
          <IonIcon aria-hidden="true" :icon="compass" />
          <IonLabel>Riwa</IonLabel>
        </IonTabButton>

        <IonTabButton tab="market" href="/layout/market">
          <IonIcon aria-hidden="true" :icon="cellular" />
          <IonLabel>Market</IonLabel>
        </IonTabButton>

        <IonTabButton tab="trade" href="/layout/trade">
          <IonIcon aria-hidden="true" :icon="swapHorizontal" />
          <IonLabel>Trade</IonLabel>
        </IonTabButton>

        <IonTabButton tab="chat" href="/layout/chat">
          <IonIcon aria-hidden="true" :icon="chatboxEllipses" />
          <IonLabel>Chat</IonLabel>
        </IonTabButton>

        <IonTabButton tab="user" href="/layout/user">
          <IonIcon aria-hidden="true" :icon="personCircle" />
          <IonLabel>User</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  </IonPage>
</template>

<style scoped>
.tabbar {
  height: 60px;
  --background: var(--ion-background-color);
}
</style>
