msg

93:I[903690,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 95:T22da,[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { MenuBar } from "@/components/menu-bar" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tooltip-content { display: inline-block; white-space: nowrap; } .tooltip-content-wrapper { position: relative; height: 16px; overflow: hidden; animation: fadeIn 150ms ease-out; } .tooltip-label { position: absolute; top: 0; left: 0; right: 0; opacity: 1; transform: translateY(0); transition: all 800ms cubic-bezier(0.34, 1.56, 0.64, 1); } [data-state='closed'] { opacity: 0; transition: opacity 150ms ease-out; } [data-state='open'] { opacity: 1; transition: opacity 150ms ease-out, width 800ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } .tooltip-content.slide-in { animation: slideIn 150ms ease-out; } .tooltip-content.slide-out { animation: slideOut 150ms ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .tooltip-animation { animation: fadeIn 0.3s ease-in-out, slideIn 0.3s ease-in-out; } [V0_FILE]typescriptreact:file="components/menu-bar.tsx" 'use client' import { useState, useRef, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' interface MenuBarProps { className?: string } const menuItems = [ { icon: (props: React.SVGProps) => ( ), label: "Messages" }, { icon: (props: React.SVGProps) => ( ), label: "Mail" }, { icon: (props: React.SVGProps) => ( ), label: "Explore" }, { icon: (props: React.SVGProps) => ( ), label: "Share" }, { icon: (props: React.SVGProps) => ( ), label: "Write" }, { icon: (props: React.SVGProps) => ( ), label: "Menu" } ] export function MenuBar({ className }: MenuBarProps) { 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] as HTMLElement; 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) => ( ))}

) } 89:["$","$L93",null,{"chatId":"QQuRufafvGP","children":["$","$L94",null,{"data":{"@\"active-block\",\"QQuRufafvGP\",":{"id":"iXhP8PFsPfc","messageId":"y2k6vJOJVvZsp3dsHj2p4YCzn3hsosVV","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"menu-interface","type":"code-project","project":"menu-interface"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"QQuRufafvGP\",":false},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This