docs: update

docs/pages/index.vue

@@ -93,137 +93,8 @@ export default defineNuxtConfig({
 })</code>
     </pre>
 
-    <h2 class="font-bold text-2xl text-tw-gray-900">
+    <NuxtLink to="/examples" class="font-bold text-2xl text-tw-gray-900 hover:underline block">
       Examples
-    </h2>
-
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Button:
-      </div>
-      <UButton variant="primary" icon="heroicons-outline:bell">
-        toto
-      </UButton>
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Avatar:
-      </div>
-      <UAvatar src="https://picsum.photos/200/300" />
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Card:
-      </div>
-      <UCard @submit.prevent="onSubmit">
-        <UInputGroup label="Email" name="email" class="mb-3">
-          <UInput type="email" name="email" />
-        </UInputGroup>
-        <UButton type="submit" label="Submit" />
-      </UCard>
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Modal:
-      </div>
-      <UButton @click="toggleModalIsOpen()">
-        Toggle modal!
-      </UButton>
-
-      <UModal v-model="isModalOpen" title="Modal">
-        Body
-      </UModal>
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Dropdown:
-      </div>
-      <UDropdown v-slot="{ open }" :items="dropdownItems" placement="bottom-start">
-        <UButton variant="white" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
-          Open menu!
-        </UButton>
-      </UDropdown>
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Dropdown with avatar:
-      </div>
-      <UDropdown :items="customDropdownItems" placement="bottom-end">
-        <button>
-          <UAvatar src="https://picsum.photos/200/300" />
-        </button>
-        <template #item-with-avatar="{ item }">
-          <UAvatar v-if="item.avatar" :src="item.avatar" size="xxs" class="mr-3" />
-          {{ item.label }}
-        </template>
-      </UDropdown>
-    </div>
-    <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
-        Toggle:
-      </div>
-      <UToggle v-model="isSwitchEnabled" />
-    </div>
-    <!-- <UPopover v-slot="{ open }">
-      <UButton trailing variant="white" :icon="open ? 'heroicons-outline:chevron-up' : 'heroicons-outline:chevron-down'">
-        toto
-      </UButton>
-    </UPopover> -->
+    </NuxtLink>
   </div>
 </template>
-
-<script setup>
-const isModalOpen = ref(false)
-const isSwitchEnabled = ref(false)
-
-function toggleModalIsOpen () {
-  isModalOpen.value = !isModalOpen.value
-}
-
-function onClick () {
-  // eslint-disable-next-line no-console
-  console.warn('click')
-}
-
-function onSubmit () {
-  // eslint-disable-next-line no-console
-  console.warn('submit')
-}
-
-const dropdownItems = [
-  [{
-    label: 'Edit',
-    icon: 'heroicons-solid:pencil',
-    click: () => onClick()
-  }, {
-    label: 'Duplicate',
-    icon: 'heroicons-solid:duplicate'
-  }],
-  [{
-    label: 'Archive',
-    icon: 'heroicons-solid:archive'
-  }, {
-    label: 'Move',
-    icon: 'heroicons-solid:external-link'
-  }],
-  [{
-    label: 'Delete',
-    icon: 'heroicons-solid:trash'
-  }]
-]
-
-const customDropdownItems = [
-  [{
-    label: 'benjamincanac',
-    avatar: 'https://picsum.photos/200/300',
-    href: 'https://google.fr',
-    target: '_blank',
-    slot: 'item-with-avatar'
-  }],
-  [{
-    label: 'About',
-    icon: 'heroicons-solid:plus',
-    to: '/about'
-  }]
-]
-</script>