feat: show custom cookbook

components/common/BackBtn.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const router = useRouter()
+function back() {
+  router.back()
+}
+</script>
+
+<template>
+  <YlfIconButton
+    icon="i-ri-arrow-left-s-line"
+    @click="back"
+  />
+</template>

components/common/DarkToggle.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+useHead({
+  meta: [{
+    id: 'theme-color',
+    name: 'theme-color',
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
+  }],
+})
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <YlfIconButton
+    class="icon-btn hover:text-yellow-400 !outline-none"
+    text-xl
+    title="切换" @click="toggleDark()"
+  >
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </YlfIconButton>
+</template>

components/common/YlfForm.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="ylf-form" flex="~ col">
-    <slot />
-  </div>
-</template>
-
-<style lang="scss">
-.ylf-form {
-  background-color: var(--ylf-c-bg-alt);
-
-  border-top: 1px solid var(--ylf-c-border);
-  border-bottom: 1px solid var(--ylf-c-border);
-
-  margin: 10px 0;
-
-  .ylf-form-item {
-    border-bottom: 1px solid var(--ylf-c-border);
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
-</style>

components/common/YlfFormItem.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { NuxtLink } from '#components'
-
-defineProps<{
-  icon?: string
-  label?: string
-  /**
-   * Router link
-   */
-  to?: string
-}>()
-</script>
-
-<template>
-  <component
-    :is="to ? NuxtLink : 'div'"
-    :to="to"
-    class="ylf-form-item"
-    w-full flex cursor-pointer items-center justify-between p-3
-    hover:bg-gray-100
-    dark:hover:bg-dark-400
-  >
-    <div v-if="label" class="text-md" inline-flex items-center justify-center>
-      <div v-if="icon" :class="icon" mr-2 inline-flex />
-      <span>{{ label }}</span>
-    </div>
-    <div inline-flex>
-      <slot>
-        <div v-if="to" i-ri-arrow-right-s-line />
-      </slot>
-    </div>
-  </component>
-</template>

components/common/YlfSwitch.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { Switch } from '@headlessui/vue'
-
-defineProps<{
-  modelValue: boolean
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-function updateModelValue(value: boolean) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<template>
-  <Switch
-    :model-value="modelValue"
-    :class="modelValue ? 'bg-blue-600' : 'bg-gray'"
-    class="relative h-6 w-11 inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
-    @update:model-value="updateModelValue"
-  >
-    <span class="sr-only">Use setting</span>
-    <span
-      aria-hidden="true"
-      :class="modelValue ? 'translate-x-5' : 'translate-x-0'"
-      class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
-    />
-  </Switch>
-</template>