'use client' // ============================================ // Imports // ============================================ import { Typography } from "@/components/ui/typography"; import { Button } from "@/components/ui/button"; import { IoLogoGithub } from "react-icons/io"; import { FaXTwitter } from "react-icons/fa6"; import { ThemeToggle } from "@/components/ui/theme-toogle"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { useTheme } from "next-themes"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { Menu, X } from "lucide-react"; import { useState } from "react"; import { AnimatePresence, motion, Variants } from "motion/react"; // ============================================ // Data & Params // ============================================ const data = { navigationLinks: [ { title: 'Components', href: '/components' }, { title: 'Blocks', href: '/blocks' }, ], actionsButtons: [ { tooltipContent: 'Follow on X', icon: , href: 'https://x.com/souhail_dev' }, { tooltipContent: 'Github repo', icon: , href: 'https://github.com' }, ], logoComponent: ( Root UI ) } const listVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { delayChildren: 0, staggerChildren: 0.07, }, }, } const itemVariants: Variants = { hidden: { y: 20, opacity: 0, filter: 'blur(8px)', transition: { duration: 1.5, ease: [0.19, 1, 0.22, 1] } }, visible: { y: 0, opacity: 1, filter: 'blur(0px)', transition: { duration: 1.5, ease: [0.19, 1, 0.22, 1] } }, } // ============================================ // Main Component // ============================================ function Navbar() { return ( ) } // ============================================ // Sub Components // ============================================ function DesktopNavbar() { const { theme } = useTheme() const pathName = usePathname() return (

{/* Logo */} {data.logoComponent}

{/* Navigation links */} {/* Action Buttons */}

{data.actionsButtons.map((button) => ( {button.tooltipContent} ))} {/* Theme Toggle Switcher */} {theme === 'dark' ? 'Light mode' : 'Dark mode'}

) } function MobileNavbar() { const [isOpen, setOpen] = useState(false) return (

{/* Logo */} {data.logoComponent}

{/* Menu Content */} {/* Theme Toggle Switcher */} {isOpen && } {/* Menu Trigger */}

) } function MobileMenuContent({ isOpen, setOpen, }: { isOpen: boolean, setOpen: React.Dispatch> }) { const pathName = usePathname() return ( {isOpen && (

{/* Navigation Links */} {data.navigationLinks.map(link => ( setOpen(false)} className="w-full h-full p-md"> {link.title} ))} {/* Action Buttons */} {data.actionsButtons.map((button) => ( ))}

)} ) } // ============================================ // Exports // ============================================ export { Navbar }