116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import defaultLogo from "../../public/logo.png";
|
|
import { GlobalHeader } from "../../tina/__generated__/types";
|
|
import { ObjectField } from "@tinacms/schema-tools/dist/types";
|
|
|
|
export const Header = ({ data }: { data: GlobalHeader }) => {
|
|
const navbarToggler: JSX.Element = (
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon" />
|
|
</button>
|
|
);
|
|
return (
|
|
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
|
|
<div className="flex grow justify-between px-6 h-full">
|
|
<div className="flex navbar-brand">
|
|
<Link
|
|
href="/"
|
|
className="container flex items-center"
|
|
>
|
|
<img src={ data.logoSrc || defaultLogo.src }/>
|
|
<div className="flex flex-col px-6">
|
|
<h3 className="title" data-tina-field={ tinaField(data, "title") }>{ data.title }</h3>
|
|
<div className="subtitle" data-tina-field={ tinaField(data, "subtitle") }>{ data.subtitle }</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
{ navbarToggler }
|
|
<div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
|
|
<ul className="flex md:flex-row">
|
|
{ data.nav &&
|
|
data.nav.map((item, i) => {
|
|
return (
|
|
<li
|
|
key={ `${ item.label }-${ i }` }
|
|
className="nav-item"
|
|
>
|
|
<Link
|
|
data-tina-field={ tinaField(item, "label") }
|
|
href={ `${ item.external? "" : "/" }${ item.href }` }
|
|
className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
|
|
>
|
|
{ item.label }
|
|
</Link>
|
|
</li>
|
|
);
|
|
}) }
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export const headerSchema: ObjectField = {
|
|
type: "object",
|
|
label: "Header",
|
|
name: "header",
|
|
fields: [
|
|
{
|
|
type: "string",
|
|
label: "Page Title",
|
|
name: "pageTitle"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Title",
|
|
name: "title"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Subtitle",
|
|
name: "subtitle"
|
|
},
|
|
{
|
|
type: "image",
|
|
label: "Logo",
|
|
name: "logoSrc"
|
|
},
|
|
{
|
|
type: "object",
|
|
label: "Nav Links",
|
|
name: "nav",
|
|
list: true,
|
|
ui: {
|
|
itemProps: (item) => {
|
|
return { label: item?.label };
|
|
},
|
|
defaultItem: {
|
|
href: "home",
|
|
label: "Home",
|
|
external: false
|
|
}
|
|
},
|
|
fields: [
|
|
{
|
|
type: "string",
|
|
label: "Link",
|
|
name: "href"
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Label",
|
|
name: "label"
|
|
},
|
|
{
|
|
type: "boolean",
|
|
label: "External",
|
|
name: "external"
|
|
}
|
|
]
|
|
}]
|
|
}; |