docs: add pricing banner (#1391)

docs/app.vue

@@ -3,6 +3,8 @@
   <div>
     <NuxtLoadingIndicator />
 
+    <Banner />
+
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>

docs/components/Banner.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { isAfter } from 'date-fns'
+
+const id = 'nuxt-ui-banner-1'
+const to = '/pro/pricing'
+const date = new Date('2024-02-25T20:00:00Z')
+
+const timeAgo = useTimeAgo(date)
+
+const hideBanner = () => {
+  localStorage.setItem(id, 'true')
+
+  document.querySelector('html')?.classList.add('hide-banner')
+}
+
+if (process.server) {
+  useHead({
+    script: [{
+      key: 'prehydrate-template-banner',
+      innerHTML: `
+            if (localStorage.getItem('${id}') === 'true') {
+              document.querySelector('html').classList.add('hide-banner')
+            }`.replace(/\s+/g, ' '),
+      type: 'text/javascript'
+    }]
+  })
+}
+
+onMounted(() => {
+  if (isAfter(new Date(), date)) {
+    hideBanner()
+    return
+  }
+
+  const interval = setInterval(() => {
+    if (isAfter(new Date(), date)) {
+      hideBanner()
+      clearInterval(interval)
+    }
+  }, 1000)
+})
+</script>
+
+<template>
+  <div class="relative bg-primary hover:bg-primary/90 transition-[background] backdrop-blur z-50 app-banner">
+    <UContainer class="py-2">
+      <NuxtLink v-if="to" :to="to" class="focus:outline-none" tabindex="-1">
+        <span class="absolute inset-0 " aria-hidden="true" />
+      </NuxtLink>
+
+      <div class="flex items-center justify-between gap-2">
+        <div class="lg:flex-1 hidden lg:flex items-center" />
+
+        <p class="text-sm font-medium text-white dark:text-gray-900">
+          <UIcon name="i-heroicons-gift" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
+          <span class="font-semibold">Nuxt UI Pro v1.0</span> is out with dashboard components! Discount ends <span class="font-semibold">{{ timeAgo }}</span>.
+        </p>
+
+        <div class="flex items-center justify-end lg:flex-1">
+          <button
+            class="p-1.5 rounded-md inline-flex hover:bg-primary/90"
+            @click.prevent="hideBanner"
+          >
+            <UIcon name="i-heroicons-x-mark-20-solid" class="w-5 h-5 text-white dark:text-gray-900" />
+          </button>
+        </div>
+      </div>
+    </UContainer>
+  </div>
+</template>
+
+<style scoped>
+.hide-banner .app-banner {
+  display: none;
+}
+</style>

docs/components/Header.vue

@@ -18,7 +18,7 @@
     <template #right>
       <ColorPicker />
 
-      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
+      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
         <UContentSearchButton :label="null" />
       </UTooltip>
 

docs/components/color-picker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPopover mode="hover">
+  <UPopover mode="hover" :popper="{ strategy: 'absolute' }" :ui="{ width: 'w-[156px]' }">
     <template #default="{ open }">
       <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
         <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />