"use client"; import { useState, useRef, useEffect, createContext, useContext, useMemo, useCallback, } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import React from "react"; interface InfoCardTitleProps extends React.HTMLAttributes { children: React.ReactNode; } interface InfoCardDescriptionProps extends React.HTMLAttributes { children: React.ReactNode; } const InfoCardTitle = React.memo( ({ children, className, ...props }: InfoCardTitleProps) => { return (

{children}

); } ); InfoCardTitle.displayName = "InfoCardTitle"; const InfoCardDescription = React.memo( ({ children, className, ...props }: InfoCardDescriptionProps) => { return (

{children}

); } ); InfoCardDescription.displayName = "InfoCardDescription"; interface CommonCardProps extends React.HTMLAttributes { children: React.ReactNode; } interface InfoCardProps extends React.HTMLAttributes { children: React.ReactNode; storageKey?: string; dismissType?: "once" | "forever"; } type InfoCardContentProps = CommonCardProps; type InfoCardFooterProps = CommonCardProps; type InfoCardDismissProps = React.HTMLAttributes & { children: React.ReactNode; onDismiss?: () => void; }; type InfoCardActionProps = CommonCardProps; const InfoCardContent = React.memo( ({ children, className, ...props }: InfoCardContentProps) => { return (

{children}

); } ); InfoCardContent.displayName = "InfoCardContent"; interface MediaItem { type?: "image" | "video"; src: string; alt?: string; className?: string; [key: string]: any; } interface InfoCardMediaProps extends React.HTMLAttributes { media: MediaItem[]; loading?: "eager" | "lazy"; shrinkHeight?: number; expandHeight?: number; } const InfoCardImageContext = createContext<{ handleMediaLoad: (mediaSrc: string) => void; setAllImagesLoaded: (loaded: boolean) => void; }>({ handleMediaLoad: () => {}, setAllImagesLoaded: () => {}, }); const InfoCardContext = createContext<{ isHovered: boolean; onDismiss: () => void; }>({ isHovered: false, onDismiss: () => {}, }); function InfoCard({ children, className, storageKey, dismissType = "once", }: InfoCardProps) { if (dismissType === "forever" && !storageKey) { throw new Error( 'A storageKey must be provided when using dismissType="forever"' ); } const [isHovered, setIsHovered] = useState(false); const [allImagesLoaded, setAllImagesLoaded] = useState(true); const [isDismissed, setIsDismissed] = useState(() => { if (typeof window === "undefined" || dismissType === "once") return false; return dismissType === "forever" ? localStorage.getItem(storageKey!) === "dismissed" : false; }); const handleDismiss = useCallback(() => { setIsDismissed(true); if (dismissType === "forever") { localStorage.setItem(storageKey!, "dismissed"); } }, [storageKey, dismissType]); const imageContextValue = useMemo( () => ({ handleMediaLoad: () => {}, setAllImagesLoaded, }), [setAllImagesLoaded] ); const cardContextValue = useMemo( () => ({ isHovered, onDismiss: handleDismiss, }), [isHovered, handleDismiss] ); return ( {!isDismissed && ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {children} )} ); } const InfoCardFooter = ({ children, className }: InfoCardFooterProps) => { const { isHovered } = useContext(InfoCardContext); return ( {children} ); }; const InfoCardDismiss = React.memo( ({ children, className, onDismiss, ...props }: InfoCardDismissProps) => { const { onDismiss: contextDismiss } = useContext(InfoCardContext); const handleClick = (e: React.MouseEvent) => { e.preventDefault(); onDismiss?.(); contextDismiss(); }; return (

{children}

); } ); InfoCardDismiss.displayName = "InfoCardDismiss"; const InfoCardAction = React.memo( ({ children, className, ...props }: InfoCardActionProps) => { return (

{children}

); } ); InfoCardAction.displayName = "InfoCardAction"; const InfoCardMedia = ({ media = [], className, loading = undefined, shrinkHeight = 75, expandHeight = 150, }: InfoCardMediaProps) => { const { isHovered } = useContext(InfoCardContext); const { setAllImagesLoaded } = useContext(InfoCardImageContext); const [isOverflowVisible, setIsOverflowVisible] = useState(false); const loadedMedia = useRef(new Set()); const handleMediaLoad = (mediaSrc: string) => { loadedMedia.current.add(mediaSrc); if (loadedMedia.current.size === Math.min(3, media.slice(0, 3).length)) { setAllImagesLoaded(true); } }; const processedMedia = useMemo( () => media.map((item) => ({ ...item, type: item.type || "image", })), [media] ); const displayMedia = useMemo( () => processedMedia.slice(0, 3), [processedMedia] ); useEffect(() => { if (media.length > 0) { setAllImagesLoaded(false); loadedMedia.current.clear(); } else { setAllImagesLoaded(true); // No media to load } }, [media.length]); useEffect(() => { let timeoutId: NodeJS.Timeout; if (isHovered) { timeoutId = setTimeout(() => { setIsOverflowVisible(true); }, 100); } else { setIsOverflowVisible(false); } return () => clearTimeout(timeoutId); }, [isHovered]); const mediaCount = displayMedia.length; const getRotation = (index: number) => { if (!isHovered || mediaCount === 1) return 0; return (index - (mediaCount === 2 ? 0.5 : 1)) * 5; }; const getTranslateX = (index: number) => { if (!isHovered || mediaCount === 1) return 0; return (index - (mediaCount === 2 ? 0.5 : 1)) * 20; }; const getTranslateY = (index: number) => { if (!isHovered) return 0; if (mediaCount === 1) return -5; return index === 0 ? -10 : index === 1 ? -5 : 0; }; const getScale = (index: number) => { if (!isHovered) return 1; return mediaCount === 1 ? 1 : 0.95 + index * 0.02; }; return ( 0 ? isHovered ? expandHeight : shrinkHeight : "auto", }} style={{ overflow: isOverflowVisible ? "visible" : "hidden", }} transition={{ type: "spring", stiffness: 300, damping: 30, duration: 0.3, }} >

0 ? { height: shrinkHeight } : "h-auto" )} > {displayMedia.map((item, index) => { const { type, src, alt, className: itemClassName, ...mediaProps } = item; return ( {type === "video" ? (

); })}

); }; export { InfoCard, InfoCardTitle, InfoCardDescription, InfoCardContent, InfoCardMedia, InfoCardFooter, InfoCardDismiss, InfoCardAction, };