<script setup lang='ts'>
import AnimatedList from './AnimatedList.vue'
import Notification from './Notification.vue'

let notifications = [
  {
    name: 'Payment received',
    description: 'Spark UI',
    time: '15m ago',
    icon: '💸',
    color: '#00C9A7',
  },
  {
    name: 'User signed up',
    description: 'Spark UI',
    time: '10m ago',
    icon: '👤',
    color: '#FFB800',
  },
  {
    name: 'New message',
    description: 'Spark UI',
    time: '5m ago',
    icon: '💬',
    color: '#FF3D71',
  },
  {
    name: 'New event',
    description: 'Spark UI',
    time: '2m ago',
    icon: '🗞️',
    color: '#1E86FF',
  },
]

notifications = Array.from({ length: 30 }, () => notifications).flat()
</script>

<template>
  <AnimatedList>
    <template #default>
      <Notification
        v-for="(item, index) in notifications" :key="index" :name="item.name" :description="item.description"
        :icon="item.icon" :color="item.color" :time="item.time"
      />
    </template>
  </AnimatedList>
</template>

<script setup lang='ts'>
import Meteors from './Meteors.vue'
</script>

<template>
  <div
    class="relative flex h-[450px] w-[300px] md:w-[500px] flex-col items-center justify-center overflow-hidden rounded-lg"
    border
  >
    <div class="absolute top-10 inset-x-0">
      <Meteors :number="30" />
    </div>
    <span
      class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent"
    >
      Meteors
    </span>
  </div>
</template>

<script setup lang='ts'>
import { Icon } from '@iconify/vue'
import { cn } from '@/libs/utils'
import AnimatedGradientText from './animatedGradientText.vue'
</script>

<template>
  <AnimatedGradientText>
    🎉
    <hr class="mx-2 h-4 w-[1px] shrink-0 bg-gray-300">
    <span
      :class="cn(
        `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
      )"
    >
      Introducing Spark UI
    </span>
    <Icon
      icon="ic:sharp-keyboard-arrow-right"
      class="ml-1 size-3 transition-transform w-4 h-4 text-black dark:text-white duration-300 ease-in-out group-hover:translate-x-0.5"
    />
  </AnimatedGradientText>
</template>

<style>
.animate-gradient {
  background-size: var(--bg-size);
  animation: gradientAnimation 8s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: var(--bg-size) 0;
  }

  50% {
    background-position: 0 0;
  }

  100% {
    background-position: var(--bg-size) 0;
  }
}
</style>

<script setup lang='ts'>
import SkewedInfiniteScroll from './SkewedInfiniteScroll.vue'

const items = [
  { id: '1', text: 'Spark UI' },
  { id: '2', text: 'Magic UI' },
  { id: '3', text: 'Spark UI' },
  { id: '4', text: 'Magic UI' },
  { id: '5', text: 'Spark UI' },
  { id: '6', text: 'Magic UI' },
  {
    id: '7',
    text: 'Spark UI',
  },
  {
    id: '8',
    text: 'Magic UI',
  },
]
</script>

<template>
  <SkewedInfiniteScroll :items="items" />
</template>

<script setup lang='ts'>
import { Icon } from '@iconify/vue'
import { cn } from '@/libs/utils'
import AnimatedShinyText from './AnimatedShinyText.vue'
</script>

<template>
  <div class="grid place-items-center min-h-screen w-full">
    <div class="z-10 flex min-h-[16rem] items-center justify-center">
      <div
        :class="cn(
          'group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800')"
      >
        <AnimatedShinyText class="inline-flex items-center justify-center px-4 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
          <span>✨ Introducing Spark UI</span>
          <Icon icon="ic:sharp-keyboard-arrow-right" class="ml-1 text-neutral-400 w-5 h-5 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
        </AnimatedShinyText>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import RetroGrid from './retroGrid.vue'
</script>

<template>
  <div
    class="relative flex h-[400px] w-[200px] lg:w-[600px] flex-col items-center justify-center overflow-hidden rounded-lg border bg-background"
  >
    <span
      class="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent"
    >
      Retro Grid
    </span>

    <RetroGrid />
  </div>
</template>

<script setup lang='ts'>
import BlurFade from './BlurFade.vue'
</script>

<template>
  <div class="flex flex-col space-y-2">
    <BlurFade in-view :delay="250">
      <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
        Hello World 👋
      </span>
    </BlurFade>
    <BlurFade in-view :delay="350 * 2">
      <span class="font-[500] text-[20px] dark:text-white tracking-tighter">
        Nice to meet you ✨
      </span>
    </BlurFade>
  </div>
</template>

<script setup lang='ts'>
import BlurIn from './BlurIn.vue'
</script>

<template>
  <BlurIn word="Spark UI ✨" class="font-bold text-black dark:text-white" />
</template>

<script setup lang='ts'>
import Globe from './Globe.vue'
</script>

<template>
  <div>
    <div
      class="relative flex h-[400px] w-[500px] max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border px-40 pb-40 pt-8 md:pb-48"
    >
      <span
        class="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10"
      >
        Globe
      </span>
      <Globe />
      <div
        class="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]"
      />
    </div>
  </div>
</template>