feat(ui): vendor Aceternity registry components + showcase gallery
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
This commit is contained in:
asepharyana
gwm-bot
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const Tooltip = ({
|
||||
content,
|
||||
children,
|
||||
containerClassName,
|
||||
}: {
|
||||
content: string | React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
containerClassName?: string;
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [mouse, setMouse] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
|
||||
const [height, setHeight] = useState(0);
|
||||
const [position, setPosition] = useState<{ x: number; y: number }>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible && contentRef.current) {
|
||||
setHeight(contentRef.current.scrollHeight);
|
||||
}
|
||||
}, [isVisible, content]);
|
||||
|
||||
const calculatePosition = (mouseX: number, mouseY: number) => {
|
||||
if (!contentRef.current || !containerRef.current) return { x: mouseX + 12, y: mouseY + 12 };
|
||||
|
||||
const tooltip = contentRef.current;
|
||||
const container = containerRef.current;
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Get tooltip dimensions
|
||||
const tooltipWidth = 240; // min-w-[15rem] = 240px
|
||||
const tooltipHeight = tooltip.scrollHeight;
|
||||
|
||||
// Calculate absolute position relative to viewport
|
||||
const absoluteX = containerRect.left + mouseX;
|
||||
const absoluteY = containerRect.top + mouseY;
|
||||
|
||||
let finalX = mouseX + 12;
|
||||
let finalY = mouseY + 12;
|
||||
|
||||
// Check if tooltip goes beyond right edge
|
||||
if (absoluteX + 12 + tooltipWidth > viewportWidth) {
|
||||
finalX = mouseX - tooltipWidth - 12;
|
||||
}
|
||||
|
||||
// Check if tooltip goes beyond left edge
|
||||
if (absoluteX + finalX < 0) {
|
||||
finalX = -containerRect.left + 12;
|
||||
}
|
||||
|
||||
// Check if tooltip goes beyond bottom edge
|
||||
if (absoluteY + 12 + tooltipHeight > viewportHeight) {
|
||||
finalY = mouseY - tooltipHeight - 12;
|
||||
}
|
||||
|
||||
// Check if tooltip goes beyond top edge
|
||||
if (absoluteY + finalY < 0) {
|
||||
finalY = -containerRect.top + 12;
|
||||
}
|
||||
|
||||
return { x: finalX, y: finalY };
|
||||
};
|
||||
|
||||
const updateMousePosition = (mouseX: number, mouseY: number) => {
|
||||
setMouse({ x: mouseX, y: mouseY });
|
||||
const newPosition = calculatePosition(mouseX, mouseY);
|
||||
setPosition(newPosition);
|
||||
};
|
||||
|
||||
const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
setIsVisible(true);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
updateMousePosition(mouseX, mouseY);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setMouse({ x: 0, y: 0 });
|
||||
setPosition({ x: 0, y: 0 });
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isVisible) return;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
updateMousePosition(mouseX, mouseY);
|
||||
};
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const touch = e.touches[0];
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const mouseX = touch.clientX - rect.left;
|
||||
const mouseY = touch.clientY - rect.top;
|
||||
updateMousePosition(mouseX, mouseY);
|
||||
setIsVisible(true);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
// Delay hiding to allow for tap interaction
|
||||
setTimeout(() => {
|
||||
setIsVisible(false);
|
||||
setMouse({ x: 0, y: 0 });
|
||||
setPosition({ x: 0, y: 0 });
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// Toggle visibility on click for mobile devices
|
||||
if (window.matchMedia("(hover: none)").matches) {
|
||||
e.preventDefault();
|
||||
if (isVisible) {
|
||||
setIsVisible(false);
|
||||
setMouse({ x: 0, y: 0 });
|
||||
setPosition({ x: 0, y: 0 });
|
||||
} else {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
updateMousePosition(mouseX, mouseY);
|
||||
setIsVisible(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update position when tooltip becomes visible or content changes
|
||||
useEffect(() => {
|
||||
if (isVisible && contentRef.current) {
|
||||
const newPosition = calculatePosition(mouse.x, mouse.y);
|
||||
setPosition(newPosition);
|
||||
}
|
||||
}, [isVisible, height, mouse.x, mouse.y]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn("relative inline-block", containerClassName)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onMouseMove={handleMouseMove}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{children}
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
key={String(isVisible)}
|
||||
initial={{ height: 0, opacity: 1 }}
|
||||
animate={{ height, opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 200,
|
||||
damping: 20,
|
||||
}}
|
||||
className="pointer-events-none absolute z-50 min-w-[15rem] overflow-hidden rounded-md border border-transparent bg-white shadow-sm ring-1 shadow-black/5 ring-black/5 dark:bg-neutral-900 dark:shadow-white/10 dark:ring-white/5"
|
||||
style={{
|
||||
top: position.y,
|
||||
left: position.x,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="p-2 text-sm text-neutral-600 md:p-4 dark:text-neutral-400"
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user