[V0_FILE]typescriptreact:file="components/mega-menu.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronDown } from "lucide-react" const menuData = { learn: { title: "Learn", sections: { courses: { title: "Courses", items: [ { title: "Languages", subitems: ["CHPs", "List"] }, { title: "Topics", subitems: ["PALs", "PHPs", "List of content"] }, ], }, paths: { title: "Paths", items: [ { title: "Course PALs", subitems: ["Popular Topics"] }, { title: "Popular Topics", subitems: ["Interview Prep"] }, ], }, }, }, interviewPrep: { title: "Interview Prep", sections: { mockInterview: { title: "Mock Interview", items: [{ title: "Topics", subitems: ["CS, SD, etc.", "PALs", "List"] }], }, palIps: { title: "PAL IPs", items: [{ title: "Practice Problems", subitems: ["Algorithms", "Data Structures"] }], }, }, }, apply: { title: "Apply", sections: { cloud: { title: "Cloud", items: [ { title: "AWS Cloud", subitems: ["CloudLabs", "Certification"] }, { title: "Topics/Tech", subitems: ["List"] }, ], }, projects: { title: "Projects", items: [ { title: "Portfolio Projects", subitems: ["List"] }, { title: "Capstone Projects", subitems: ["List"] }, ], }, }, }, } export function MegaMenu() { const [activeMenu, setActiveMenu] = React.useState(null) const [activeSubItem, setActiveSubItem] = React.useState(null) return (

EduPlatform

{Object.entries(menuData).map(([key, menu]) => (

setActiveMenu(key)} onMouseLeave={() => { setActiveMenu(null) setActiveSubItem(null) }} > {activeMenu === key && (

{Object.entries(menu.sections).map(([sectionKey, section]) => (

{section.title}

{section.items.map((item, itemIndex) => (

setActiveSubItem(`${sectionKey}-${itemIndex}`)} >

{item.title} {item.subitems && item.subitems.length > 0 && ( )}

{activeSubItem === `${sectionKey}-${itemIndex}` && item.subitems && (

{item.subitems.map((subitem, subIndex) => ( {subitem} ))}

)}

))}

)}

))}

) } [V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isMerged="true" "use client" import * as React from "react" import { Menu, X, ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" const menuData = { learn: { title: "Learn", sections: { courses: { title: "Courses", items: [ { title: "Languages", subitems: ["CHPs", "List"] }, { title: "Topics", subitems: ["PALs", "PHPs", "List of content"] }, ], }, paths: { title: "Paths", items: [ { title: "Course PALs", subitems: ["Popular Topics"] }, { title: "Popular Topics", subitems: ["Interview Prep"] }, ], }, }, }, interviewPrep: { title: "Interview Prep", sections: { mockInterview: { title: "Mock Interview", items: [{ title: "Topics", subitems: ["CS, SD, etc.", "PALs", "List"] }], }, palIps: { title: "PAL IPs", items: [{ title: "Practice Problems", subitems: ["Algorithms", "Data Structures"] }], }, }, }, apply: { title: "Apply", sections: { cloud: { title: "Cloud", items: [ { title: "AWS Cloud", subitems: ["CloudLabs", "Certification"] }, { title: "Topics/Tech", subitems: ["List"] }, ], }, projects: { title: "Projects", items: [ { title: "Portfolio Projects", subitems: ["List"] }, { title: "Capstone Projects", subitems: ["List"] }, ], }, }, }, } export function MobileMenu() { const [isOpen, setIsOpen] = React.useState(false) const [expandedSections, setExpandedSections] = React.useState>(new Set()) const [expandedItems, setExpandedItems] = React.useState>(new Set()) const toggleSection = (sectionKey: string) => { const newExpanded = new Set(expandedSections) if (newExpanded.has(sectionKey)) { newExpanded.delete(sectionKey) } else { newExpanded.add(sectionKey) } setExpandedSections(newExpanded) } const toggleItem = (itemKey: string) => { const newExpanded = new Set(expandedItems) if (newExpanded.has(itemKey)) { newExpanded.delete(itemKey) } else { newExpanded.add(itemKey) } setExpandedItems(newExpanded) } return (

{isOpen && (

{Object.entries(menuData).map(([menuKey, menu]) => (

{expandedSections.has(menuKey) && (

{Object.entries(menu.sections).map(([sectionKey, section]) => (

{section.title}

{section.items.map((item, itemIndex) => { const itemKey = `${menuKey}-${sectionKey}-${itemIndex}` return (

{expandedItems.has(itemKey) && item.subitems && (

{item.subitems.map((subitem, subIndex) => ( {subitem} ))}

)}

) })}

))}

)}

))}

)}

) } [V0_FILE]typescriptreact:file="mega-menu-demo.tsx" isEdit="true" isMerged="true" import { NavbarWithMegaMenu } from "./components/navbar-with-mega-menu" export default function MegaMenuDemo() { return (

Three-Level Mega Menu Dropdown

Click on "Menu" in the navigation bar to see the mega menu dropdown with three levels of navigation

How it works

Level 1: Main categories (Learn, Apply, Get Hired) with expandable sections

Level 2: Course difficulty levels and topic categories with visual indicators

Level 3: Specific courses and detailed content listings

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import MegaMenuDemo from "../mega-menu-demo" export default function Page() { return } [V0_FILE]typescriptreact:file="components/navbar-with-mega-menu.tsx" isEdit="true" isMerged="true" import { MegaMenuDropdown } from "./mega-menu-dropdown" export function NavbarWithMegaMenu() { return ( ) } [V0_FILE]typescriptreact:file="components/mega-menu-dropdown.tsx" isEdit="true" "use client" import * as React from "react" import { ChevronDown, ChevronRight, BookOpen, Code, Briefcase, FileSpreadsheet } from "lucide-react" import { cn } from "@/lib/utils" const menuData = { learn: { title: "Learn", icon: BookOpen, sections: [ { title: "Courses", hasArrow: true, level2Items: [ { title: "Programming Languages", isHeading: true, level3Items: [], }, { title: "Python", level3Items: [ "Python for Beginners", "Advanced Python Programming", "Python Data Structures", "Python Web Development", ], }, { title: "SQL", level3Items: [ "Learn SQL Fundamentals", "Advanced SQL Queries", "Database Design with SQL", "SQL for Data Analysis", ], }, { title: "Web Development", isHeading: true, level3Items: [], }, { title: "React", level3Items: [ "React for Beginners", "Advanced React Patterns", "React Hooks Mastery", "React State Management", ], }, { title: "Express JS", level3Items: [ "Express.js Fundamentals", "Building APIs with Express", "Express Middleware Deep Dive", "Express Security Best Practices", ], }, { title: "Frontend", level3Items: ["Frontend Fundamentals", "Modern CSS Techniques", "JavaScript ES6+", "Responsive Web Design"], }, { title: "Backend", level3Items: [ "Backend Development Basics", "Server Architecture", "Database Integration", "API Development", ], }, { title: "System Design", level3Items: [ "System Design Fundamentals", "Scalable Architecture Patterns", "Microservices Design", "Database System Design", ], }, ], }, { title: "Skill Paths", hasArrow: true, level2Items: [ { title: "Data & Analytics", isHeading: true, level3Items: [], }, { title: "Data Analyst Track", level3Items: [ "Complete Data Analyst Bootcamp", "Excel to Power BI Journey", "SQL for Data Analysis", "Python Data Analysis Path", ], }, { title: "Data Scientist Track", level3Items: [ "Data Science Fundamentals", "Machine Learning Specialist", "Advanced Statistics Path", "AI & Deep Learning Track", ], }, { title: "Big Data", level3Items: [ "Hadoop Ecosystem Mastery", "Apache Spark Developer", "Data Engineering Pipeline", "Real-time Analytics Track", ], }, { title: "Development", isHeading: true, level3Items: [], }, { title: "Software Engineer Track", level3Items: [ "Full Stack Developer Path", "Backend Engineer Journey", "Frontend Specialist Track", "DevOps Engineer Path", ], }, { title: "Web Developer Track", level3Items: [ "Modern Web Development", "React Developer Path", "Node.js Backend Track", "Full Stack JavaScript", ], }, { title: "Back-end Development", level3Items: [ "Server-Side Architecture", "Database Design Mastery", "API Development Expert", "Microservices Architect", ], }, { title: "Algorithms", level3Items: [ "Data Structures & Algorithms", "Competitive Programming", "Algorithm Design Patterns", "Advanced Problem Solving", ], }, { title: "Specialized Skills", isHeading: true, level3Items: [], }, { title: "Artificial Intelligence", level3Items: [ "AI Fundamentals Track", "Machine Learning Engineer", "Deep Learning Specialist", "AI Product Manager", ], }, { title: "Cybersecurity", level3Items: [ "Ethical Hacking Certification", "Security Analyst Path", "Penetration Testing Expert", "Cloud Security Specialist", ], }, { title: "API", level3Items: [ "RESTful API Design", "GraphQL Developer", "API Security Expert", "Microservices API Architect", ], }, { title: "Animation", level3Items: [ "Web Animation Developer", "CSS Animation Mastery", "JavaScript Animation Expert", "Motion Graphics Designer", ], }, { title: "Cloud Computing", level3Items: [ "AWS Solutions Architect", "Azure Cloud Engineer", "Google Cloud Developer", "Multi-Cloud Specialist", ], }, { title: "Mobile Development", level3Items: [ "iOS Developer Track", "Android Developer Path", "React Native Specialist", "Flutter Developer Journey", ], }, ], }, { title: "Personalized Learning", hasArrow: true, isNew: true, level2Items: [ { title: "Interview Preparation", isHeading: true, level3Items: [], }, { title: "Google", level3Items: [ "Google Coding Interview Prep", "Google System Design Questions", "Google Behavioral Interview Guide", "Google-Specific Algorithm Practice", ], }, { title: "Meta", level3Items: [ "Meta Technical Interview Prep", "Meta Product Sense Questions", "Meta Leadership Principles", "Meta Coding Challenge Practice", ], }, { title: "Netflix", level3Items: [ "Netflix Engineering Culture Prep", "Netflix System Design Cases", "Netflix Technical Leadership", "Netflix Innovation Mindset", ], }, { title: "Amazon", level3Items: [ "Amazon Leadership Principles", "Amazon System Design Interview", "Amazon Behavioral Questions", "Amazon Technical Deep Dive", ], }, { title: "Apple", level3Items: [ "Apple Design Philosophy Prep", "Apple Technical Excellence", "Apple Innovation Interview", "Apple Product Development", ], }, { title: "Personalized Roadmaps", isHeading: true, level3Items: [], }, { title: "Python", level3Items: [ "Python Beginner to Expert Roadmap", "Python Data Science Career Path", "Python Web Development Journey", "Python DevOps Engineer Track", ], }, { title: "SQL", level3Items: [ "SQL Mastery Roadmap", "Database Administrator Path", "SQL Data Analyst Journey", "Advanced SQL Developer Track", ], }, { title: "React", level3Items: [ "React Developer Roadmap", "React Native Mobile Path", "React Full Stack Journey", "React Senior Developer Track", ], }, { title: "Express JS", level3Items: [ "Express.js Backend Roadmap", "Node.js Full Stack Path", "API Development Journey", "Microservices with Express Track", ], }, { title: "Frontend", level3Items: [ "Frontend Developer Roadmap", "UI/UX Developer Path", "Modern Frontend Journey", "Senior Frontend Engineer Track", ], }, { title: "Backend", level3Items: [ "Backend Engineer Roadmap", "Cloud Backend Developer Path", "Scalable Systems Journey", "Backend Architect Track", ], }, ], }, { title: "Technologies", hasArrow: true, level2Items: [ { title: "Programming Languages", isHeading: true, level3Items: [], }, { title: "Python", level3Items: [ "Python for Beginners", "Advanced Python Programming", "Python Data Structures", "Python Web Development", ], }, { title: "JavaScript", level3Items: [ "JavaScript Fundamentals", "ES6+ Modern JavaScript", "Async JavaScript", "JavaScript Design Patterns", ], }, { title: "Java", level3Items: [ "Java Programming Basics", "Object-Oriented Java", "Spring Framework", "Java Enterprise Development", ], }, { title: "Frameworks & Libraries", isHeading: true, level3Items: [], }, { title: "React", level3Items: [ "React for Beginners", "Advanced React Patterns", "React Hooks Mastery", "React State Management", ], }, { title: "Node.js", level3Items: ["Node.js Fundamentals", "Express.js Framework", "Node.js APIs", "Node.js Performance"], }, { title: "Databases", isHeading: true, level3Items: [], }, { title: "SQL Databases", level3Items: [ "PostgreSQL Mastery", "MySQL Development", "SQL Server Administration", "Database Design Principles", ], }, { title: "NoSQL Databases", level3Items: ["MongoDB Development", "Redis Caching", "Elasticsearch Basics", "DynamoDB on AWS"], }, ], }, { title: "Popular Topics", hasArrow: true, level2Items: [ { title: "Trending Technologies", isHeading: true, level3Items: [], }, { title: "Artificial Intelligence", level3Items: [ "Introduction to AI", "Machine Learning Basics", "Deep Learning Fundamentals", "AI Ethics & Applications", ], }, { title: "Machine Learning", level3Items: [ "ML Algorithms Explained", "Supervised Learning", "Unsupervised Learning", "Neural Networks Intro", ], }, { title: "Cloud Computing", level3Items: ["AWS Fundamentals", "Azure Basics", "Google Cloud Platform", "Multi-Cloud Strategies"], }, { title: "In-Demand Skills", isHeading: true, level3Items: [], }, { title: "Data Science", level3Items: [ "Data Analysis with Python", "Statistical Analysis", "Data Visualization", "Business Intelligence", ], }, { title: "Cybersecurity", level3Items: ["Security Fundamentals", "Ethical Hacking Basics", "Network Security", "Cloud Security"], }, { title: "DevOps", level3Items: [ "CI/CD Pipelines", "Docker Containerization", "Kubernetes Orchestration", "Infrastructure as Code", ], }, ], }, ], }, apply: { title: "Apply", icon: Code, sections: [ { title: "Projects", hasArrow: true, level2Items: [ { title: "Web Development", isHeading: true, level3Items: [], }, { title: "Frontend Projects", level3Items: [ "React Portfolio Website", "Vue.js E-commerce App", "Angular Dashboard", "JavaScript Game Development", ], }, { title: "Backend Projects", level3Items: [ "Node.js REST API", "Python Flask Application", "Java Spring Boot Service", "Go Microservice", ], }, { title: "Full Stack Projects", level3Items: [ "MERN Stack Application", "Django + React Project", "Next.js Full Stack App", "Ruby on Rails Application", ], }, { title: "Data Science", isHeading: true, level3Items: [], }, { title: "Data Analysis Projects", level3Items: [ "Sales Data Analysis", "Customer Behavior Study", "Financial Market Analysis", "Social Media Analytics", ], }, { title: "Machine Learning Projects", level3Items: [ "Predictive Modeling", "Image Classification", "Natural Language Processing", "Recommendation System", ], }, { title: "Mobile Development", isHeading: true, level3Items: [], }, { title: "iOS Projects", level3Items: ["Swift Weather App", "Core Data Todo App", "SwiftUI Social App", "iOS Game Development"], }, { title: "Android Projects", level3Items: [ "Kotlin News App", "Java Calculator App", "Android Chat Application", "Mobile Game with Unity", ], }, ], }, { title: "CloudLabs", hasArrow: true, level2Items: [ { title: "Amazon Web Services", isHeading: true, level3Items: [], }, { title: "AWS Compute", level3Items: [ "Build EC2 Web Server", "Lambda Serverless App", "ECS Container Deployment", "Auto Scaling Implementation", ], }, { title: "AWS Storage", level3Items: ["S3 Static Website", "S3 Data Lake Project", "EBS Volume Management", "CloudFront CDN Setup"], }, { title: "AWS Database", level3Items: ["RDS MySQL Setup", "DynamoDB NoSQL Lab", "ElastiCache Redis Lab", "Aurora Serverless Lab"], }, { title: "Microsoft Azure", isHeading: true, level3Items: [], }, { title: "Azure Compute", level3Items: [ "App Service Deployment", "Azure Functions Project", "Virtual Machine Setup", "Container Instances", ], }, { title: "Azure Data", level3Items: [ "Blob Storage Application", "SQL Database Project", "Cosmos DB Implementation", "Data Factory Pipeline", ], }, { title: "Google Cloud", isHeading: true, level3Items: [], }, { title: "GCP Compute", level3Items: [ "Compute Engine Project", "Cloud Functions Build", "Kubernetes Deployment", "App Engine Application", ], }, { title: "GCP Data", level3Items: ["BigQuery Analytics", "Cloud Storage Project", "Firestore Application", "Pub/Sub Messaging"], }, ], }, { title: "Assessment", hasArrow: true, level2Items: [ { title: "Programming Languages", isHeading: true, level3Items: [], }, { title: "Python Assessment", level3Items: [ "Python Fundamentals Test", "Data Structures Quiz", "Algorithm Implementation", "Web Framework Assessment", ], }, { title: "JavaScript Assessment", level3Items: [ "ES6+ Features Test", "DOM Manipulation Quiz", "Async Programming Test", "Framework Knowledge Check", ], }, { title: "Java Assessment", level3Items: [ "OOP Concepts Test", "Collections Framework Quiz", "Spring Framework Assessment", "Multithreading Evaluation", ], }, { title: "Frameworks & Tools", isHeading: true, level3Items: [], }, { title: "React Assessment", level3Items: [ "Component Architecture Test", "Hooks Implementation Quiz", "State Management Assessment", "Performance Optimization Test", ], }, { title: "Database Assessment", level3Items: [ "SQL Query Writing Test", "Database Design Quiz", "NoSQL Concepts Assessment", "Performance Tuning Evaluation", ], }, { title: "Cloud Platforms", isHeading: true, level3Items: [], }, { title: "AWS Assessment", level3Items: [ "Core Services Test", "Security Best Practices Quiz", "Architecture Design Assessment", "Cost Optimization Evaluation", ], }, { title: "DevOps Assessment", level3Items: [ "CI/CD Pipeline Test", "Container Technology Quiz", "Infrastructure as Code Assessment", "Monitoring & Logging Evaluation", ], }, ], }, ], }, getHired: { title: "Get Hired", icon: Briefcase, sections: [ { title: "Mock Interview", hasArrow: true, isNew: true, level2Items: [ { title: "System Design", isHeading: true, level3Items: [], }, { title: "Large Scale Systems", level3Items: [ "Design Twitter - INT001", "Design WhatsApp - INT002", "Design Netflix - INT003", "Design Uber - INT004", "Design Instagram - INT005", "Design YouTube - INT006", ], }, { title: "Database Design", level3Items: [ "Design Chat Database - INT007", "Design E-commerce DB - INT008", "Design Social Media DB - INT009", "Design Analytics DB - INT010", ], }, { title: "Low Level Design", isHeading: true, level3Items: [], }, { title: "Object Oriented Design", level3Items: [ "Stack Overflow - INT011", "Vending Machine - INT012", "Parking Lot System - INT013", "Library Management - INT014", "ATM Machine - INT015", "Chess Game - INT016", ], }, { title: "Coding Problems", isHeading: true, level3Items: [], }, { title: "Data Structures & Algorithms", level3Items: [ "Two Sum Problem - INT017", "Reverse Linked List - INT018", "Binary Tree Traversal - INT019", "Merge Sort Implementation - INT020", "Dynamic Programming - INT021", "Graph Algorithms - INT022", ], }, { title: "API Design", level3Items: [ "REST API Design - INT023", "GraphQL Schema - INT024", "Rate Limiting - INT025", "Authentication System - INT026", "Payment Gateway API - INT027", "Social Media API - INT028", ], }, ], }, { title: "Interview Prep", hasArrow: true, level2Items: [ { title: "FAANG Companies", isHeading: true, level3Items: [], }, { title: "Google", level3Items: [ "Software Engineer", "Senior Software Engineer", "Staff Software Engineer", "Principal Engineer", "Engineering Manager", "Product Manager", ], }, { title: "Meta", level3Items: [ "Software Engineer", "Senior Software Engineer", "Staff Software Engineer", "Principal Engineer", "Engineering Manager", "Product Manager", ], }, { title: "Amazon", level3Items: [ "Software Development Engineer", "Senior SDE", "Principal Engineer", "Engineering Manager", "Product Manager", "Solutions Architect", ], }, { title: "Apple", level3Items: [ "Software Engineer", "Senior Software Engineer", "Staff Engineer", "Principal Engineer", "Engineering Manager", "Product Manager", ], }, { title: "Netflix", level3Items: [ "Software Engineer", "Senior Software Engineer", "Staff Engineer", "Principal Engineer", "Engineering Manager", "Product Manager", ], }, { title: "Other Top Companies", isHeading: true, level3Items: [], }, { title: "Microsoft", level3Items: [ "Software Engineer", "Senior Software Engineer", "Principal Engineer", "Partner Engineer", "Engineering Manager", "Product Manager", ], }, { title: "Tesla", level3Items: [ "Software Engineer", "Senior Software Engineer", "Staff Engineer", "Principal Engineer", "Engineering Manager", "Firmware Engineer", ], }, ], }, { title: "Certificate Prep", hasArrow: true, level2Items: [ { title: "AWS Certifications", level3Items: [ "AWS Cloud Practitioner Prep", "AWS Solutions Architect Associate Prep", "AWS Developer Associate Prep", "AWS SysOps Administrator Prep", "AWS Solutions Architect Professional Prep", "AWS DevOps Engineer Professional Prep", ], }, { title: "Azure Certifications", level3Items: [ "Azure Fundamentals Prep", "Azure Developer Associate Prep", "Azure Solutions Architect Prep", "Azure Data Engineer Prep", "Azure Security Engineer Prep", "Azure DevOps Engineer Prep", ], }, { title: "Google Cloud Certifications", level3Items: [ "GCP Cloud Digital Leader Prep", "GCP Associate Cloud Engineer Prep", "GCP Professional Developer Prep", "GCP Data Engineer Prep", "GCP Security Engineer Prep", "GCP DevOps Engineer Prep", ], }, { title: "Programming Certifications", level3Items: [ "Oracle Java Certification Prep", "Microsoft C# Certification Prep", "Python Institute Certification Prep", "JavaScript Certification Prep", ], }, { title: "Data Science Certifications", level3Items: [ "Google Data Analytics Certificate Prep", "IBM Data Science Professional Prep", "Microsoft Azure Data Scientist Prep", "Coursera Data Science Specialization Prep", ], }, { title: "Cybersecurity Certifications", level3Items: [ "CompTIA Security+ Prep", "CISSP Certification Prep", "CEH Ethical Hacker Prep", "CISM Certification Prep", ], }, ], }, ], }, } export function MegaMenuDropdown() { const [isOpen, setIsOpen] = React.useState(false) const [activeSection, setActiveSection] = React.useState("learn") const [hoveredSubsection, setHoveredSubsection] = React.useState(null) const [hoveredLevel2Item, setHoveredLevel2Item] = React.useState(null) const [isHoveringLevel2, setIsHoveringLevel2] = React.useState(false) const [isHoveringLevel3, setIsHoveringLevel3] = React.useState(false) const [isHoveringMenu, setIsHoveringMenu] = React.useState(false) const getActiveSubsectionData = () => { if (!hoveredSubsection) return null const activeMenu = menuData[activeSection as keyof typeof menuData] return activeMenu.sections.find((section) => section.title === hoveredSubsection) } const getActiveLevel2Data = () => { const subsectionData = getActiveSubsectionData() if (!subsectionData || !hoveredLevel2Item) return null return subsectionData.level2Items?.find((item) => item.title === hoveredLevel2Item) } return (

{isOpen && ( <>

setIsOpen(false)} />

setIsHoveringMenu(true)} onMouseLeave={() => { setIsHoveringMenu(false) setHoveredSubsection(null) setHoveredLevel2Item(null) setIsHoveringLevel2(false) setIsHoveringLevel3(false) }} >

{/* Left Column - Main Categories */}

{Object.entries(menuData).map(([key, menu]) => { const Icon = menu.icon const isActive = activeSection === key return (

{/* Always show all sections */}

{menu.sections.map((section, index) => ( ))}

) })}

{/* Middle Column - Level 2 Items */}

{hoveredSubsection && getActiveSubsectionData()?.level2Items ? (

{getActiveSubsectionData()?.level2Items?.map((item) => item.isHeading ? (

{item.title}

) : ( ), )}

) : (

Hover over a section to see options

)}

{/* Right Column - Level 3 Items */}

{hoveredLevel2Item && getActiveLevel2Data() ? (

{getActiveLevel2Data()?.level3Items?.map((item) => ( ))}

) : (

Hover over a category to see details

)}

) }