import Link from 'next/link' ; import Head from 'next/head' ; import ExtLink from './ext-link' ; import { useRouter } from 'next/router' ; import styles from '../styles/header.module.css' ; const navItems = [ { label : 'Home' , page : '/' } , { label : 'Blog' , page : '/blog' } , { label : 'Contact' , page : '/contact' } , { label : 'Source Code' , link : 'https://github.com/ijjk/notion-blog' } , ] ; const ogImageUrl = 'https://notion-blog.now.sh/og-image.png' ; const Header = ( { titlePre = '' } ) => { const { pathname } = useRouter ( ) ; return ( < header className = { styles . header } > < Head > < title > { titlePre ? `${ titlePre } |` : '' } My Notion Blog < /title> < meta name = "description" content = "An example Next.js site using Notion for the blog" / > < meta name = "og:title" content = "My Notion Blog" / > < meta property = "og:image" content = { ogImageUrl } / > < meta name = "twitter:site" content = "@_ijjk" / > < meta name = "twitter:card" content = "summary_large_image" / > < meta name = "twitter:image" content = { ogImageUrl } / > < /Head> < ul > { navItems . map ( ( { label , page , link } ) => ( < li key = { label } > { page ? ( < Link href = { page } > < a className = { pathname === page ? 'active' : undefined } > { label } < /a> < /Link>) : (<ExtLink href={link}>{label}</ExtLink > ) } < /li>))} < /ul> < /header>); } ; export default Header ;