Pointer

"use client";

import { motion } from "motion/react";

import { Pointer } from "@/lab/magicui/ui/pointer";

function Panel({ title, text, children }: { title: string; text: string; children: React.ReactNode }) {
  return (
    <div className="relative flex flex-col items-center justify-center overflow-hidden rounded-lg border border-neutral-200 p-2 text-center">
      <h3 className="text-sm font-semibold text-neutral-950">{title}</h3>
      <p className="text-[11px] text-neutral-500">{text}</p>
      {children}
    </div>
  );
}

export default function PointerDemo() {
  return (
    <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-3">
      <Panel title="Animated Pointer" text="Animated pointer">
        <Pointer>
          <motion.div
            animate={{ scale: [0.8, 1, 0.8], rotate: [0, 5, -5, 0] }}
            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
          >
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-pink-600">
              <motion.path
                d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                fill="currentColor"
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 0.8, repeat: Infinity, ease: "easeInOut" }}
              />
            </svg>
          </motion.div>
        </Pointer>
      </Panel>
      <Panel title="Colored Pointer" text="A custom pointer with different color">
        <Pointer className="fill-blue-500" />
      </Panel>
      <Panel title="Custom Shape" text="A pointer with a custom SVG shape">
        <Pointer>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" className="fill-purple-500" />
            <circle cx="12" cy="12" r="5" className="fill-white" />
          </svg>
        </Pointer>
      </Panel>
      <Panel title="Emoji Pointer" text="Using an emoji as a custom pointer">
        <Pointer>
          <div className="text-2xl">👆</div>
        </Pointer>
      </Panel>
    </div>
  );
}