msg

94:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw"],"SWRDataProvider"] 96: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) => ( ))}

) } 8a:["$","$L94",null,{"chatId":"QQuRufafvGP","children":["$","$L95",null,{"data":{"@\"active-block\",\"QQuRufafvGP\",":{"id":"iXhP8PFsPfc","messageId":"y2k6vJOJVvZsp3dsHj2p4YCzn3hsosVV","source":"$96","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,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This