/** biome-ignore-all lint/correctness/useImageSize: motion.img with layoutId doesn't support width/height */ /** biome-ignore-all lint/performance/noImgElement: motion.img is required for animation transitions */ "use client" import { AnimatePresence, motion } from "motion/react" import Link from "next/link" import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState, } from "react" import { createPortal } from "react-dom" import { cn } from "@/lib/utils" type NavContextType = { hoveredId: string | null setHoveredId: (id: string | null) => void registerImage: (id: string, image: string) => void images: Map } const NavContext = createContext(null) const useNavContext = () => { const context = useContext(NavContext) if (!context) { throw new Error( "TtpBlurFocusNavigationItem must be used within TtpBlurFocusNavigation" ) } return context } type TtpBlurFocusNavigationProps = { /** * Navigation items as children */ children: ReactNode } /** * HomeBlurredNav - A navigation component with blurred background * * A beautiful navigation bar with backdrop blur effect, perfect for home pages. * * @example * ```tsx * * * * * ``` */ export const TtpBlurFocusNavigation = ({ children, }: TtpBlurFocusNavigationProps) => { const [hoveredId, setHoveredId] = useState(null) const [images, setImages] = useState>(new Map()) const registerImage = useCallback((id: string, image: string) => { setImages((prev) => { const newMap = new Map(prev) newMap.set(id, image) return newMap }) }, []) const contextValue = useMemo( () => ({ hoveredId, setHoveredId, registerImage, images, }), [hoveredId, images, registerImage] ) const hoveredImage = hoveredId ? images.get(hoveredId) : null return ( {children} {typeof document !== "undefined" && createPortal( {hoveredImage && ( )} , document.body )} ) } export type TtpBlurFocusNavigationItemProps = { className?: string label: string href: string id: string image: string } /** * HomeBlurredNavItem - A navigation item component * * Individual navigation item that updates the shared hover state via context. * * @example * ```tsx * * ``` */ export const TtpBlurFocusNavigationItem = ({ label, href, id, className, image, }: TtpBlurFocusNavigationItemProps) => { const { hoveredId, setHoveredId, registerImage } = useNavContext() const isHovered = hoveredId === id // Register the image with the id when component mounts useEffect(() => { if (image) { registerImage(id, image) } }, [id, image, registerImage]) return ( setHoveredId(id)} onMouseLeave={() => setHoveredId(null)} > {label} ) }