import React from 'react' ; import cn from 'clsx' ; import Link from '../link' ; import Button from '../button' ; import DeployButton , { DeployButtonProps } from '../deploy-button' ; import s from './nav.module.css' ; const REPO_URL = 'https://github.com/vercel/examples' ; const REPO_DIR = '/tree/main/' ; export interface NavProps { path : string ; deployButton ? : Partial < DeployButtonProps > ; } export default function Nav ( { path , deployButton } ) { return ( < nav className = { s . root } > < div className = { cn ( 'flex items-center lg:px-6 px-8' , s . container ) } > < div className = "flex flex-row items-center" > < Link href = "/" > < span > < svg height = "26" viewBox = "0 0 75 65" fill = "#000" > < title > Vercel Logo < /title> < path d = "M37.59.25l36.95 64H.64l36.95-64z" > < /path> < /svg> < /span> < /Link> < li className = "ml-2 text-gray-200" > < svg viewBox = "0 0 24 24" width = "32" height = "32" stroke = "currentColor" strokeWidth = "1" strokeLinecap = "round" strokeLinejoin = "round" fill = "none" shapeRendering = "geometricPrecision" > < path d = "M16.88 3.549L7.12 20.451" > < /path> < /svg> < /li> < li className = "font-medium" style = { { letterSpacing : '.01px' } } > < Link href = "/" className = { s . link } > Vercel Examples { path ? ` / ${ path }` : '' } < /Link> < /li> < /div> < div className = "flex-1 justify-end hidden md:flex" > < nav className = "flex-row inline-flex items-center" > < span className = "ml-2 h-full flex items-center cursor-not-allowed text-accents-5" > < Button variant = "ghost" Component = "a" href = "https://github.com/vercel/examples/tree/main" > More Examples → < /Button> < /span> < span className = "ml-2 h-full flex items-center cursor-not-allowed text-accents-5" > < DeployButton { ... deployButton } repositoryUrl = { deployButton ?. repositoryUrl || `${ REPO_URL }${ REPO_DIR }/${ path }` } projectName = { deployButton ?. projectName || path } repositoryName = { deployButton ?. repositoryName || path } /> < /span> < /nav> < /div> < /div> < /nav>); }