Hover Card

"use client";

// A preview card that opens while you rest on a link (a person, a repo, a
// page) and stays while you move into it, so its own links can be used. It
// waits before opening and before closing, so passing over a link does
// nothing. Keyboard focus opens it too.

import { AnimatePresence, motion } from "motion/react";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { EASE_OUT, Portal, SURFACE, originFor, triggerBox, useAnchoredPosition, useDismiss, useLayer, type Align, type Side } from "../_overlay/overlay";

export type HoverCardProps = {
  /** The link or element that shows the card. */
  children: ReactNode;
  content: ReactNode;
  side?: Side;
  align?: Align;
  /** Gap between trigger and card in px. */
  offset?: number;
  /** Milliseconds of hover before it opens. */
  openDelay?: number;
  /** Milliseconds after leaving before it closes. */
  closeDelay?: number;