"use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { useRef, useEffect, useState } from "react"; export function PointerHighlight({ children, rectangleClassName, pointerClassName, containerClassName, }: { children: React.ReactNode; rectangleClassName?: string; pointerClassName?: string; containerClassName?: string; }) { const containerRef = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() => { if (containerRef.current) { const { width, height } = containerRef.current.getBoundingClientRect(); setDimensions({ width, height }); } const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const { width, height } = entry.contentRect; setDimensions({ width, height }); } }); if (containerRef.current) { resizeObserver.observe(containerRef.current); } return () => { if (containerRef.current) { resizeObserver.unobserve(containerRef.current); } }; }, []); return (

{children} {dimensions.width > 0 && dimensions.height > 0 && ( )}

); } const Pointer = ({ ...props }: React.SVGProps) => { return ( ); };

Pointer Highlight

Instalação