feat: init

src/components/layout/default.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <ion-page>
+    <ion-tabs>
+      <ion-router-outlet />
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home" href="/layout/home">
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
+            <ion-label>{{ t('tabs.home') }}</ion-label>
+          </div>
+        </ion-tab-button>
+
+        <ion-tab-button tab="notify" href="/layout/notify">
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
+            <ion-label>{{ t('tabs.notify') }}</ion-label>
+          </div>
+        </ion-tab-button>
+
+        <ion-tab-button tab="user" href="/layout/user">
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
+            <ion-label>{{ t('tabs.user') }}</ion-label>
+          </div>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-page>
+</template>
+
+<style  scoped>
+ion-tab-bar {
+  height: 60px;
+  --background: var(--ion-background-color);
+  box-shadow: 0px 0px 12px rgba(45, 213, 90, 0.21);
+  padding-bottom: var(--ion-safe-area-bottom);
+}
+.icon {
+  font-size: 1.5rem;
+}
+</style>