"use client"; import React, { useRef, useState, useEffect } from "react"; import Link from "next/link"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; import HomeIcon from "../ui/home-icon"; import MagnifierIcon from "../ui/magnifier-icon"; import FilledBellIcon from "../ui/filled-bell-icon"; import UserCheckIcon from "../ui/user-check-icon"; import UnorderedListIcon from "../ui/unordered-list-icon"; import { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; const navItems = [ { icon: HomeIcon, label: "Home", href: "#" }, { icon: MagnifierIcon, label: "Search", href: "#" }, { icon: FilledBellIcon, label: "Notifications", href: "#" }, { icon: UnorderedListIcon, label: "Lists", href: "#" }, { icon: UserCheckIcon, label: "Profile", href: "#" }, ]; interface AnimatedNavbarProps { className?: string; isAnimated?: boolean; } const AnimatedNavbar = ({ className, isAnimated = true, }: AnimatedNavbarProps) => { const [activeTab, setActiveTab] = useState("Home"); return (

); }; interface NavItemProps { icon: React.ForwardRefExoticComponent< AnimatedIconProps & React.RefAttributes >; label: string; href: string; isActive: boolean; onClick: () => void; isAnimated: boolean; } const NavItem = ({ icon: Icon, label, href, isActive, onClick, isAnimated, }: NavItemProps) => { const iconRef = useRef(null); const handleMouseEnter = () => { if (isAnimated) { iconRef.current?.startAnimation(); } }; const handleMouseLeave = () => { if (isAnimated) { iconRef.current?.stopAnimation(); } }; useEffect(() => { if (!isAnimated) { iconRef.current?.stopAnimation(); } }, [isAnimated]); return ( { e.preventDefault(); onClick(); }} className={cn( "relative flex flex-1 items-center justify-center rounded-full px-4 py-3 text-sm font-medium transition-colors sm:flex-none", isActive ? "text-neutral-900 dark:text-white" : "text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200", )} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {isActive && ( )}

{label}

); }; export default AnimatedNavbar;

Animated Navbar

Platform

Category