msg

92:I[903690,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"SWRDataProvider"] 94: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) => ( ))}

) } 88:["$","$L92",null,{"chatId":"QQuRufafvGP","children":["$","$L93",null,{"data":{"@\"active-block\",\"QQuRufafvGP\",":{"id":"iXhP8PFsPfc","messageId":"y2k6vJOJVvZsp3dsHj2p4YCzn3hsosVV","source":"$94","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":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This