package list from viandwi24

components/Page/Body.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

components/Page/Content/Doc.vue

@@ -0,0 +1,30 @@
+<script setup>
+const props = defineProps({
+  emptyTip: {
+    type: String,
+    required: false,
+    default: 'This page is empty',
+  },
+})
+</script>
+
+<template>
+  <ContentDoc>
+    <template #default="{ doc }">
+      <PageHeader>
+        <PageTitle :text="doc.title" />
+      </PageHeader>
+      <PageBody>
+        <PageSection>
+          <ContentRenderer :value="doc" />
+        </PageSection>
+      </PageBody>
+    </template>
+    <template #empty>
+      <h1>{{ emptyTip }}</h1>
+    </template>
+    <template #not-found>
+      <Error :code="404" wrap />
+    </template>
+  </ContentDoc>
+</template>

components/Page/Content/Renderer.vue

@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+  path: {
+    type: String,
+    required: true,
+  },
+  pageTitle: {
+    type: String,
+    default: '',
+  },
+})
+
+const { data } = await useAsyncData(props.path, () =>
+  queryContent(props.path).findOne()
+)
+</script>
+
+<template>
+  <PageWrapper>
+    <PageHeader>
+      <PageTitle :text="pageTitle" class="capitalize" />
+    </PageHeader>
+    <PageBody>
+      <PageSection>
+        <ContentRenderer :value="data" />
+      </PageSection>
+    </PageBody>
+  </PageWrapper>
+</template>

components/Page/Footer.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { AppConfigInput } from '@nuxt/schema'
+import p from './../../package.json'
+const app = useAppConfig() as AppConfigInput
+</script>
+
+<template>
+  <footer class="border-t lg:border-gray-900/10 dark:border-gray-50/[0.2]">
+    <section
+      class="max-w-8xl mx-auto px-4 lg:px-8 flex-1 flex w-full space-x-20"
+    >
+      <div class="w-full py-4 text-center md:text-left">
+        <div class="mb-1">
+          {{ app.name }}
+        </div>
+        <div class="text-xs text-gray-600 dark:text-gray-400">
+          Copyright © 2022 <a :href="app.author.link">{{ app.author.name }}</a
+          >. All rights reserved. Made with <span class="text-red-500">❤</span>
+          <div
+            class="flex flex-col md:flex-row space-x-2 items-center md:float-right"
+          >
+            <span class="text-center md:text-right">
+              design by <a href="#link">dwd</a>
+            </span>
+            <span
+              class="block bg-blue-500 rounded px-1 py-0.5 text-white text-xs"
+            >
+              {{ p.devDependencies.nuxt }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </footer>
+</template>

components/Page/Header.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+export default defineComponent({
+  layout: 'dashboard',
+})
+</script>
+
+<template>
+  <div class="lg:px-8 px-4 mb-6">
+    <slot />
+  </div>
+</template>

components/Page/Navbar.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { AppConfigInput } from '@nuxt/schema'
+
+export interface IMenuItem {
+  type: 'link' | 'button'
+  text: string
+  href?: any
+  route?: any
+}
+
+const { t } = useLang()
+const app = useAppConfig() as AppConfigInput
+const menus = computed((): IMenuItem[] => [
+  {
+    type: 'link',
+    text: t('pages.getting-started.nav'),
+    route: { name: 'getting-started' },
+  },
+  { type: 'link', text: t('pages.blank.nav'), route: { name: 'blank' } },
+  { type: 'link', text: t('pages.test.nav'), route: { name: 'test' } },
+  { type: 'link', text: t('pages.post.nav'), route: { name: 'post' } },
+  { type: 'link', text: t('pages.setting.nav'), route: { name: 'setting' } },
+  {
+    type: 'button',
+    text: t('pages.dashboard.nav'),
+    route: { name: 'dashboard' },
+  },
+])
+</script>
+
+<template>
+  <BuilderNavbar>
+    <template #banner>
+      <div
+        class="text-white text-xs text-center py-1 px-4 lg:px-8 bg-primary-500 capitalize"
+      >
+        <span class="mr-1">
+          {{ $t('banners.welcome', { app_name: app.name }) }}
+          <Anchor
+            class="underline font-bold"
+            :text="$t('others.learn_more')"
+            href="boilarplate"
+          />
+        </span>
+      </div>
+    </template>
+    <template #menu>
+      <div class="relative hidden lg:flex items-center ml-auto">
+        <nav
+          class="text-sm leading-6 font-semibold text-gray-600 dark:text-gray-300"
+          role="navigation"
+        >
+          <ul class="flex items-center space-x-8">
+            <li v-for="(item, i) in menus" :key="i">
+              <Anchor
+                v-if="item.type === 'link'"
+                :to="item.route ? item.route : undefined"
+                :href="item.href ? item.href : undefined"
+                class="hover:no-underline hover:text-slate-900 hover:dark:text-white capitalize"
+                >{{ item.text }}</Anchor
+              >
+              <Button
+                v-else-if="item.type === 'button'"
+                :text="item.text"
+                size="xs"
+                class="font-extrabold capitalize"
+                :to="item.route ? item.route : undefined"
+                :href="item.href ? item.href : undefined"
+              />
+            </li>
+          </ul>
+        </nav>
+        <div
+          class="flex space-x-4 border-l ml-6 pl-6 border-gray-900/10 dark:border-gray-50/[0.2]"
+        >
+          <LanguageSwitcher />
+          <ThemeSwitcher />
+          <Anchor
+            class="hover:no-underline hover:text-slate-900 hover:dark:text-white text-lg flex self-center items-center"
+            href="boilarplate"
+            title="Github"
+          >
+            <IconMdi:github-face />
+          </Anchor>
+        </div>
+      </div>
+    </template>
+    <template #options="{ toggleOptions }">
+      <ActionSheet @on-close="toggleOptions(false)">
+        <ActionSheetBody>
+          <ActionSheetHeader text="Menu" />
+          <nav class="leading-6 font-semibold text-gray-600 dark:text-gray-300">
+            <ul class="flex flex-col">
+              <li
+                v-for="(item, i) in menus"
+                :key="i"
+                class="flex w-full"
+                :class="{
+                  'pb-2 mb-2 border-b border-gray-900/10 dark:border-gray-50/[0.2]':
+                    item.type === 'link',
+                }"
+              >
+                <Anchor
+                  v-if="item.type === 'link'"
+                  :to="item.route ? item.route : undefined"
+                  :href="item.href ? item.href : undefined"
+                  class="flex-1 hover:no-underline capitalize"
+                  >{{ item.text }}</Anchor
+                >
+                <Button
+                  v-else-if="item.type === 'button'"
+                  :text="item.text"
+                  size="xs"
+                  class="flex-1 font-extrabold capitalize"
+                  :to="item.route ? item.route : undefined"
+                  :href="item.href ? item.href : undefined"
+                />
+              </li>
+            </ul>
+          </nav>
+          <div class="mt-6 text-sm font-bold capitalize">
+            {{ $t('components.theme_switcher.change_theme') }}
+          </div>
+          <div class="mt-2">
+            <ThemeSwitcher type="select-box" />
+          </div>
+          <div class="mt-6 text-sm font-bold capitalize">
+            {{ $t('components.language_switcher.change_language') }}
+          </div>
+          <div class="mt-2">
+            <LanguageSwitcher type="select-box" />
+          </div>
+        </ActionSheetBody>
+        <Button
+          type="secondary"
+          title="Github"
+          href="boilarplate"
+        >
+          <IconMdi:github-face />
+          <span class="ml-1">Github</span>
+        </Button>
+        <Button
+          text="Close"
+          type="secondary"
+          @click.prevent="toggleOptions(false)"
+        />
+      </ActionSheet>
+    </template>
+  </BuilderNavbar>
+</template>

components/Page/Section/Title.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="text-2xl font-semibold mb-2">
+    <slot>{{ text }}</slot>
+  </div>
+</template>

components/Page/Section/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <section class="lg:px-8 px-4 mb-6">
+    <slot />
+  </section>
+</template>

components/Page/Title.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="text-4xl font-bold">
+    <slot>{{ text }}</slot>
+  </div>
+</template>

components/Page/Wrapper.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex-1 relative py-8">
+    <slot />
+  </div>
+</template>