feat: show custom cookbook

components/ylf/YlfForm.vue

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

components/ylf/YlfFormItem.vue

@@ -0,0 +1,33 @@
+<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/ylf/YlfIconButton.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  icon?: string
+}>()
+</script>
+
+<template>
+  <button
+    class="ylf-icon-button hover:(bg-blue-300 bg-opacity-20)"
+    h-10 w-10 inline-flex items-center justify-center rounded-full
+  >
+    <slot>
+      <div v-if="icon" text-xl :class="icon" />
+    </slot>
+  </button>
+</template>

components/ylf/YlfSwitch.vue

@@ -0,0 +1,28 @@
+<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>