arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve page descriptions and prev/next (#184)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2023-05-19 10:33:09 +02:00
committed by GitHub
parent 1743ea91d5
commit e59fe42cc9
30 changed files with 92 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/docs/DocsFooter.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<footer class="flex items-center justify-end gap-1.5">
<div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
Made by
<NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
<LogoLabs class="text-white w-14 h-auto" />
</NuxtLink>
</div>
</footer>
</template>

17
docs/components/docs/DocsPageFooter.vue
View File

@@ -1,22 +1,15 @@
<template>
<footer class="flex items-center justify-between gap-1.5">
<div class="flex items-center justify-between gap-1.5">
<UButton
v-if="page"
:to="`https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page._file}`"
label="Edit on GitHub"
color="gray"
label="Edit this page on GitHub"
color="primary"
variant="link"
:padded="false"
trailing-icon="i-heroicons-arrow-top-right-on-square-20-solid"
icon="i-heroicons-arrow-top-right-on-square-20-solid"
/>
<div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
Made by
<NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
<LogoLabs class="text-white w-14 h-auto" />
</NuxtLink>
</div>
</footer>
</div>
</template>
<script setup lang="ts">

13
docs/components/docs/DocsPrevNext.vue
View File

@@ -1,8 +1,15 @@
<template>
<div class="flex items-center justify-between">
<UButton v-if="prev" :label="prev.navigation?.title || prev.title" :to="prev._path" icon="i-heroicons-arrow-small-left-20-solid" color="white" />
<div class="grid gap-8 sm:grid-cols-2">
<DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
<span v-else>&nbsp;</span>
<UButton v-if="next" :label="next.navigation?.title || next.title" :to="next._path" trailing-icon="i-heroicons-arrow-small-right-20-solid" color="white" />
<DocsPrevNextCard
v-if="next"
:title="next.navigation?.title || next.title"
:description="next.navigation?.description || next.description"
:to="next._path"
icon="i-heroicons-arrow-right-20-solid"
class="text-right"
/>
</div>
</template>

36
docs/components/docs/DocsPrevNextCard.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<NuxtLink :to="to" class="block px-5 py-8 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/25 group">
<div v-if="icon" class="inline-flex items-center rounded-full p-1.5 bg-gray-50 dark:bg-gray-800 group-hover:bg-primary-50 dark:group-hover:bg-primary-400/10 ring-1 ring-gray-300 dark:ring-gray-700 mb-4 group-hover:ring-primary-500/50 dark:group-hover:ring-primary-400/50">
<UIcon :name="icon" class="w-5 h-5 text-gray-900 dark:text-gray-100 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
</div>
<p class="text-gray-900 dark:text-gray-50 font-medium text-[15px] mb-1">
{{ title }}
</p>
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
{{ description }}
</p>
</NuxtLink>
</template>
<script setup lang="ts">
defineProps({
icon: {
type: String,
default: null
},
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
},
to: {
type: String,
required: true
}
})
</script>