msg

85:I[903690,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"SWRDataProvider"] 87: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) => ( ))}

) } 7b:["$","$L85",null,{"chatId":"QQuRufafvGP","children":["$","$L86",null,{"data":{"@\"active-block\",\"QQuRufafvGP\",":{"id":"iXhP8PFsPfc","messageId":"y2k6vJOJVvZsp3dsHj2p4YCzn3hsosVV","source":"$87","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":"$L88"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This