"use client"; import * as HoverCardPrimitive from "@radix-ui/react-hover-card"; import Image from "next/image"; import { encode } from "qss"; import React from "react"; import { AnimatePresence, motion, useMotionValue, useSpring, } from "framer-motion"; import Link from "next/link"; import { cn } from "@/lib/utils"; type LinkPreviewProps = { children: React.ReactNode; url: string; className?: string; width?: number; height?: number; quality?: number; layout?: string; } & ( | { isStatic: true; imageSrc: string } | { isStatic?: false; imageSrc?: never } ); export const LinkPreview = ({ children, url, className, width = 200, height = 125, quality = 50, layout = "fixed", isStatic = false, imageSrc = "", }: LinkPreviewProps) => { let src; if (!isStatic) { const params = encode({ url, screenshot: true, meta: false, embed: "screenshot.url", colorScheme: "dark", "viewport.isMobile": true, "viewport.deviceScaleFactor": 1, "viewport.width": width * 3, "viewport.height": height * 3, }); src = `https://api.microlink.io/?${params}`; } else { src = imageSrc; } const [isOpen, setOpen] = React.useState(false); const [isMounted, setIsMounted] = React.useState(false); React.useEffect(() => { setIsMounted(true); }, []); const springConfig = { stiffness: 100, damping: 15 }; const x = useMotionValue(0); const translateX = useSpring(x, springConfig); const handleMouseMove = (event: any) => { const targetRect = event.target.getBoundingClientRect(); const eventOffsetX = event.clientX - targetRect.left; const offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2; // Reduce the effect to make it subtle x.set(offsetFromCenter); }; return ( <> {isMounted ? (

) : null} { setOpen(open); }} > {children} {isOpen && ( preview image

)} ); };