"use client"; import React, { useState, useRef } from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { ArrowUpRight, Heart, Share2, ExternalLink } from "lucide-react"; // --- TYPES & INTERFACES --- type Direction = "top" | "bottom" | "left" | "right"; export interface DirectionalHoverCardProps { id: string; title: string; subtitle: string; imageUrl: string; onAction?: (id: string) => void; className?: string; } /** * Directional Hover Card (v2.0 Standard Paid) - REBUILT * Detección vectorial de bordes con fusión geométrica perfecta. * Incorpora un gradiente de cristal de refracción profunda. */ export const DirectionalHoverCard = ({ id, title, subtitle, imageUrl, onAction, className, }: DirectionalHoverCardProps) => { const containerRef = useRef(null); const [direction, setDirection] = useState(null); // --- MATH VECTOR ENGINE --- const getDirection = (event: React.MouseEvent) => { if (!containerRef.current) return "top"; const el = containerRef.current; const { width, height, left, top } = el.getBoundingClientRect(); // Normalizar coordenadas respecto al centro del contenedor const x = (event.clientX - left - width / 2) * (width > height ? height / width : 1); const y = (event.clientY - top - height / 2) * (height > width ? width / height : 1); // Calcular el ángulo y determinar el lado más cercano const side = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4; const directions: Direction[] = ["top", "right", "bottom", "left"]; return directions[side]; }; const handleMouseEnter = (e: React.MouseEvent) => { setDirection(getDirection(e)); }; const handleMouseLeave = (e: React.MouseEvent) => { setDirection(null); }; // --- ANIMATION VARIANTS (Slide-up Internal) --- const overlayVariants: Variants = { initial: { y: "100%", // Comienza abajo, dentro del contenedor overflow-hidden opacity: 0, }, animate: { y: 0, opacity: 1, transition: { duration: 0.5, ease: [0.23, 1, 0.32, 1] } }, exit: { y: "100%", opacity: 0, transition: { duration: 0.4, ease: "easeInOut" } } }; return (

{/* 1. IMAGE LAYER (Shared space) */} {/* 2. DIRECTIONAL OVERLAY (Internal Slide-up) */} {direction && ( {/* High-End Glass Design with Mesh Gradient */}

Premium V2

{title}

{subtitle}

onAction?.(id)} className="w-full h-16 rounded-2xl bg-white text-black font-black text-xs uppercase tracking-[0.15em] flex items-center justify-center gap-3 active:bg-neutral-200 transition-colors" > Launch Project

)} {/* 3. STATIC FOOTER (Initial state) */}

{title}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function DirectionalHoverDemo() { return (

console.log("Navigating to project:", id)} />

); }