hover-preview

1"use client";
2 
3import NextImage from "next/image";
4import type React from "react";
5import {
6  createContext,
7  forwardRef,
8  useCallback,
9  useContext,
10  useEffect,
11  useRef,
12  useState,
13} from "react";
14import { cn } from "@/lib/cn";
15 
16// ==========================================
17// TYPES & INTERFACES
18// ==========================================
19 
20export interface PreviewData {
21  /** Image URL for the preview card */
22  image: string;
23  /** Title displayed in the preview card */
24  title: string;
25  /** Subtitle or description displayed below the title */
26  subtitle?: string;
27}
28 
29export interface HoverPreviewLinkProps {
30  /** Unique key to identify which preview data to show */
31  previewKey: string;
32  /** Content to render as the hoverable link */
33  children: React.ReactNode;
34  /** Additional CSS classes for the link */
35  className?: string;
36}
37 
38export interface HoverPreviewCardProps {
39  /** Width of the preview card in pixels */
40  width?: number;
41  /** Border radius of the card */
42  borderRadius?: number;
43  /** Additional CSS classes for the card */
44  className?: string;
45}
46 
47export interface HoverPreviewProviderProps {
48  /** Preview data object with keys matching the previewKey in HoverPreviewLink */
49  data: Record<string, PreviewData>;
50  /** Children components (should include HoverPreviewLink components) */
51  children: React.ReactNode;
52  /** Card configuration options */
53  cardProps?: HoverPreviewCardProps;
54  /** Offset distance from cursor in pixels */
55  cursorOffset?: number;
56  /** Whether to preload all images on mount */
57  preloadImages?: boolean;
58  /** Additional CSS classes for the container */
59  className?: string;
60}
61 
62// ==========================================
63// CONTEXT
64// ==========================================
65 
66interface HoverPreviewContextValue {
67  data: Record<string, PreviewData>;
68  activePreview: PreviewData | null;
69  position: { x: number; y: number };
70  isVisible: boolean;
71  cardProps: HoverPreviewCardProps;
72  handleHoverStart: (key: string, e: React.MouseEvent) => void;
73  handleHoverMove: (e: React.MouseEvent) => void;
74  handleHoverEnd: () => void;
75}
76 
77const HoverPreviewContext = createContext<HoverPreviewContextValue | null>(
78  null,
79);
80 
81function useHoverPreview() {
82  const context = useContext(HoverPreviewContext);
83  if (!context) {
84    throw new Error(
85      "HoverPreviewLink must be used within a HoverPreviewProvider",
86    );
87  }
88  return context;
89}
90 
91// ==========================================
92// COMPONENTS
93// … truncated