feat(scaffolding): add initial folder structure

Author: dvcol

src/components/AboutView.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { RouterView } from 'vue-router';
+
+import { NavbarComponent } from '~/components/common';
+import { LoginComponent } from '~/components/views/login';
+
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('global');
+const isAuthenticated = ref(true);
+</script>
+
+<template>
+  <LoginComponent v-if="!isAuthenticated" />
+  <template v-else>
+    <header>
+      <NavbarComponent />
+    </header>
+    <main>
+      <RouterView />
+    </main>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+main {
+  padding: 0 2rem;
+}
+</style>

src/components/AppComponent.vue

@@ -0,0 +1 @@
+export * from './navbar';

src/components/AppView.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { NButton, NButtonGroup } from 'naive-ui';
+import { RouterLink } from 'vue-router';
+
+import { Route } from '~/router';
+import { useRouterStore } from '~/stores/router.store';
+import { useI18n } from '~/utils';
+
+const store = useRouterStore();
+const i18n = useI18n('route');
+
+const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search, Route.Settings];
+</script>
+
+<template>
+  <nav>
+    <NButtonGroup class="buttons">
+      <template v-for="(route, index) in routes" :key="route">
+        <RouterLink v-slot="{ href, navigate, isActive }" :to="`${ store.baseName }/${route}`" custom>
+          <NButton :round="index === 0 || index === routes.length - 1" :class="{ active: isActive }" :href="href" @click="navigate">
+            {{ i18n(route.toLowerCase()) }}
+          </NButton>
+        </RouterLink>
+      </template>
+    </NButtonGroup>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+nav {
+  margin-top: 2rem;
+  font-size: 12px;
+  text-align: center;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+
+  .active {
+    color: var(--n-text-color-pressed);
+    background-color: var(--n-color-pressed);
+  }
+}
+</style>

src/components/HelloWorld.spec.ts

@@ -0,0 +1 @@
+export { default as NavbarComponent } from './NavbarComponent.vue';

src/components/HelloWorld.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+// TODO
+</script>
+
+<template>
+  <span>This is a calendar component</span>
+</template>
+
+<style lang="scss" scoped>
+// TODO
+</style>

src/components/HomeView.vue

@@ -0,0 +1 @@
+export { default as CalendarComponent } from './CalendarComponent.vue';

src/components/TheWelcome.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+// TODO
+</script>
+
+<template>
+  <span>This is a history component</span>
+</template>
+
+<style lang="scss" scoped>
+// TODO
+</style>

src/components/WelcomeItem.vue

@@ -0,0 +1 @@
+export { default as HistoryComponent } from './HistoryComponent.vue';

src/components/common/index.ts

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+// TODO
+</script>
+
+<template>
+  <span>This is a list component</span>
+</template>
+
+<style lang="scss" scoped>
+// TODO
+</style>

src/components/common/navbar/NavbarComponent.vue

@@ -0,0 +1 @@
+export { default as ListComponent } from './ListComponent.vue';