mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<template>
|
|
<header v-if="page" class="relative border-b border-gray-200 dark:border-gray-800 pb-8 mb-12">
|
|
<p class="mb-4 text-sm leading-6 font-semibold text-primary-500 dark:text-primary-400 capitalize">
|
|
{{ page._dir?.title ? page._dir.title : useLowerCase(page._dir) }}
|
|
</p>
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight dark:text-white">
|
|
{{ page.title }}
|
|
</h1>
|
|
|
|
<div class="flex items-center gap-2 mt-4 lg:mt-0">
|
|
<UButton
|
|
v-if="page.headlessui"
|
|
:label="page.headlessui.label"
|
|
:to="page.headlessui.to"
|
|
icon="i-simple-icons-headlessui"
|
|
color="white"
|
|
/>
|
|
|
|
<UButton
|
|
v-if="page.github"
|
|
label="GitHub"
|
|
icon="i-simple-icons-github"
|
|
color="white"
|
|
:to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/${page.title.replace(' ', '')}.vue`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p v-if="page.description" class="mt-4 text-lg">
|
|
{{ page.description }}
|
|
</p>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { page } = useContent()
|
|
</script>
|