msg

"use client"; import { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; const menuItems = [ { icon: (props) => ( ), label: "Messages", }, { icon: (props) => ( ), label: "Mail", }, { icon: (props) => ( ), label: "Explore", }, { icon: (props) => ( ), label: "Share", }, { icon: (props) => ( ), label: "Write", }, { icon: (props) => ( ), label: "Menu", }, ]; export function BottomNavigation({ className }) { const [activeIndex, setActiveIndex] = useState(null); const menuRef = useRef(null); const [tooltipPosition, setTooltipPosition] = useState({ left: 0, width: 0 }); const tooltipRef = useRef(null); useEffect(() => { if (activeIndex !== null && menuRef.current && tooltipRef.current) { const menuItem = menuRef.current.children[activeIndex]; const menuRect = menuRef.current.getBoundingClientRect(); const itemRect = menuItem.getBoundingClientRect(); const tooltipRect = tooltipRef.current.getBoundingClientRect(); const left = itemRect.left - menuRect.left + (itemRect.width - tooltipRect.width) / 2; setTooltipPosition({ left: Math.max(0, Math.min(left, menuRect.width - tooltipRect.width)), width: tooltipRect.width, }); } }, [activeIndex]); return (

{activeIndex !== null && (

{menuItems[activeIndex].label}

)}

{menuItems.map((item, index) => ( ))}

); }

Bottom Navigation