"use client"; import { useId, useState } from "react"; import type { AnchorHTMLAttributes, ReactNode } from "react"; import * as HoverCard from "@radix-ui/react-hover-card"; export type HoverPreviewCardProps = Omit, "title"> & { href: string; children: ReactNode; title: string; description?: ReactNode; meta?: ReactNode; media?: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; openDelay?: number; closeDelay?: number; side?: "top" | "right" | "bottom" | "left"; align?: "start" | "center" | "end"; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; export function HoverPreviewCard({ href, children, title, description, meta, media, open, defaultOpen = false, onOpenChange, openDelay = 300, closeDelay = 150, side = "bottom", align = "start", className = "", onFocus, onBlur, onKeyDown, ...props }: HoverPreviewCardProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const isOpen = open ?? uncontrolled; const contentId = useId(); const setOpen = (next: boolean) => { if (open === undefined) setUncontrolled(next); onOpenChange?.(next); }; return ( { onFocus?.(event); setOpen(true); }} onBlur={(event) => { onBlur?.(event); setOpen(false); }} onKeyDown={(event) => { onKeyDown?.(event); if (event.key === "Escape" && isOpen) setOpen(false); }} className={ "rounded-sm font-medium text-[#1F4E79] underline decoration-[#1F4E79]/30 underline-offset-4 transition-colors hover:decoration-[#1F4E79] motion-reduce:transition-none dark:text-[#8CB6E0] dark:decoration-[#8CB6E0]/30 dark:hover:decoration-[#8CB6E0] " + ring + " " + className } {...props} > {children} {media ?

{media}

: null}

{title}

{description ?

{description}

: null} {meta ?

{meta}

: null}

); }