<script setup lang="ts">
import AnimatedList from "./animated-list.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 "./animated-gradient-text.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 "./skewed-infinite-scroll.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 "./animated-shiny-text.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 "./retro-grid.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 "./blur-fade.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 "./blur-in.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>