"use client"; import React, { useState } from 'react'; import Link from 'next/link'; import { ChevronDown, Download, Github, Menu, X } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { cn } from '@/lib/utils'; // --- Data Definitions --- const productOptions = [ { label: 'CHROME', href: '#chrome' }, { label: 'MOBILE', href: '#mobile' }, { label: 'DESKTOP', href: '#desktop' }, ]; const communityOptions = [ { label: 'GITHUB', href: '#github' }, { label: 'TWITTER', href: '#twitter' }, { label: 'DISCORD', href: '#discord' }, { label: 'FORUM', href: '#forum' }, ]; const navLinks = [ { label: 'BLOG', href: '#blog' }, { label: 'ABOUT', href: '#about' }, ]; const socialLinks = [ { label: 'SOURCE', href: 'https://github.com/nice-prompt', icon: }, ]; interface NavLinkProps { href: string; label: string; icon?: React.ReactNode; className?: string; isMobile?: boolean; } function NavLink({ href, label, icon, className, isMobile = false }: NavLinkProps) { const baseClasses = isMobile ? "flex items-center gap-2 rounded-none py-2 px-3 text-base font-medium font-mono" : "h-10 rounded-xl px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:bg-gray-100"; const linkClasses = isMobile ? "" : "flex items-center gap-2"; return ( ); } interface NavDropdownProps { triggerLabel: string; options: { label: string; href: string; icon?: React.ReactNode }[]; contentWidthClass: string; isActive: boolean; onOpenChange: (open: boolean) => void; } function NavDropdown({ triggerLabel, options, contentWidthClass, isActive, onOpenChange }: NavDropdownProps) { return ( {options.map((option) => ( {option.label} {option.icon && option.icon} ))} ); } interface MobileNavDropdownProps { title: string; options: { label: string; href: string; icon?: React.ReactNode }[]; } function MobileNavDropdown({ title, options }: MobileNavDropdownProps) { return (

{title}

{options.map((option) => ( {option.label} {option.icon && option.icon} ))}

); } export default function MonoNavigation() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [activeDropdown, setActiveDropdown] = useState(null); return (

{/* Logo */}

{/* TODO: Add logo of yours */} Nice Prompt

{/* Desktop Navigation */}

setActiveDropdown(open ? 'download' : null)} /> {navLinks.map(link => )} setActiveDropdown(open ? 'community' : null)} />

{/* Right Side Actions Desktop */}

{socialLinks.map(link => )}

{/* Mobile menu button */}

{/* Mobile menu */}

{/* Add padding only when open to avoid spacing jump */}

{navLinks.map(link => )} {socialLinks.map(link => )}

); }

Mono Navigation

Prompting made easy