Great UI Avatar Stack

"use client"

import AvatarStack from "@/components/ui/great-ui-avatar-stack"

export default function AvatarStackPreview() {
  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-12 p-8 select-none">
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Spring Tilt (Moves with Cursor)</span>
        <AvatarStack variant="spring-tilt" size="md" />
      </div>
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Spring Box (Inner Tilting Box)</span>
        <AvatarStack variant="spring-box" size="md" />
      </div>
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Slide Blur (Directional Reveal)</span>
        <AvatarStack variant="slide-blur" size="md" />
      </div>
      <div className="flex w-full flex-col items-center gap-6 border-t border-neutral-200 pt-8 dark:border-neutral-800">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Size Comparison (Spring Tilt)</span>
        <div className="flex flex-wrap items-center justify-center gap-12">
          {(["sm", "md", "lg"] as const).map((size) => (
            <div key={size} className="flex flex-col items-center gap-2">
              <span className="font-mono text-[10px] text-neutral-400">{size === "sm" ? "Small (SM)" : size === "md" ? "Medium (MD)" : "Large (LG)"}</span>
              <AvatarStack variant="spring-tilt" size={size} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}