[V0_FILE]typescriptreact:file="components/animated-menu-widget.tsx" 'use client' import { useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Plus, X, Heart, Star, Bell } from 'lucide-react' const menuItems = [ { icon: Heart, color: 'text-red-500' }, { icon: Star, color: 'text-yellow-500' }, { icon: Bell, color: 'text-blue-500' }, ] export default function AnimatedMenuWidget() { const [isOpen, setIsOpen] = useState(false) const toggleMenu = () => setIsOpen(!isOpen) const handleItemClick = () => { setIsOpen(false) } return (

{isOpen && ( {menuItems.map((item, index) => ( ))} )} {isOpen ? : }

) } [V0_FILE]typescriptreact:file="app/page.tsx" import AnimatedMenuWidget from '../components/animated-menu-widget' export default function Home() { return (

Animated Menu Widget

Click the plus button to open the menu

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Animated Menu Widget', description: 'A dark mode animated menu widget with circular icons', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

About