UI Examples

<template>
<SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload }" force-open>
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 translate-y-2"
    >
      <div v-if="isCurrentChunksOutdated" class="fixed bottom-4 right-4 z-50">
        <div class="flex items-center gap-3 bg-white dark:bg-gray-900 rounded-full shadow-lg ring-1 ring-gray-200 dark:ring-gray-800 px-4 py-3">
          <span class="text-lg">✨</span>
          <div class="text-sm font-medium">
            Update available
          </div>
          <UButton color="primary" size="xs" label="Refresh" @click="reload" />
          <UButton color="gray" variant="ghost" size="xs" icon="i-heroicons-x-mark-20-solid" @click="dismiss" />
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

<template>
  <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
    <Transition name="slide-up">
      <div v-if="isCurrentChunksOutdated" class="skew-notification">
        <div class="skew-notification-content">
          <div class="skew-notification-message">
            <span class="skew-notification-icon">✨</span>
            <div>
              <div class="skew-notification-title">
                New update available!
              </div>
              <div v-if="timeAgo" class="skew-notification-subtitle">
                Released {{ timeAgo }}
              </div>
            </div>
          </div>
          <div class="skew-notification-actions">
            <button class="skew-button skew-button-secondary" @click="dismiss">
              Dismiss
            </button>
            <button class="skew-button skew-button-primary" @click="reload">
              Refresh
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </SkewNotification>
</template>

<style>
.skew-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  max-width: 400px;
}
.skew-notification-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.skew-notification-message {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.skew-notification-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.skew-notification-subtitle {
  font-size: 0.8125rem;
  color: #666;
}
.skew-notification-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.skew-button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.skew-button-primary {
  background: #18181b;
  color: white;
}
.skew-button-secondary {
  background: #f4f4f5;
  color: #52525b;
}
.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(1rem);
}
</style>