Skip to main content
Glama
navbar.tsx2.63 kB
"use client"; import * as React from "react"; import Link from "next/link"; import { cn } from "../lib/utils"; interface NavLinkProps { href: string; children: React.ReactNode; className?: string; isExternal?: boolean; } const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>( ({ href, children, className, isExternal = false, ...props }, ref) => { if (isExternal) { return ( <a ref={ref} href={href} className={cn( "hover:text-blue-400 transition-colors duration-200", className )} target="_blank" rel="noopener noreferrer" {...props} > {children} </a> ); } return ( <Link href={href} className={cn( "hover:text-blue-400 transition-colors duration-200", className )} {...props} > {children} </Link> ); } ); NavLink.displayName = "NavLink"; interface NavbarProps { className?: string; logo?: React.ReactNode; children?: React.ReactNode; } const Navbar = React.forwardRef<HTMLElement, NavbarProps>( ({ className, logo, children, ...props }, ref) => { return ( <header ref={ref} className={cn( "bg-slate-900 text-white py-4 w-full", className )} {...props} > <div className="container mx-auto px-4"> <div className="flex justify-between items-center"> <div className="text-2xl font-bold"> {logo || "BLAH"} </div> <nav> {children} </nav> </div> </div> </header> ); } ); Navbar.displayName = "Navbar"; interface NavMenuProps extends React.HTMLAttributes<HTMLUListElement> { children: React.ReactNode; } const NavMenu = React.forwardRef<HTMLUListElement, NavMenuProps>( ({ className, children, ...props }, ref) => { return ( <ul ref={ref} className={cn("flex space-x-6", className)} {...props} > {children} </ul> ); } ); NavMenu.displayName = "NavMenu"; interface NavItemProps extends React.HTMLAttributes<HTMLLIElement> { children: React.ReactNode; } const NavItem = React.forwardRef<HTMLLIElement, NavItemProps>( ({ className, children, ...props }, ref) => { return ( <li ref={ref} className={cn("", className)} {...props} > {children} </li> ); } ); NavItem.displayName = "NavItem"; export { Navbar, NavMenu, NavItem, NavLink };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/thomasdavis/blah'

If you have feedback or need assistance with the MCP directory API, please join our Discord server