Skydust/psychartherapie-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linted the whole project with eslint

Browse Source
This commit was merged in pull request #3.
This commit is contained in:
Skydust
2023-08-31 19:42:15 +02:00
parent cbc4d839d0
commit 7be98e1793
29 changed files with 2931 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
components/layout/header.tsx
View File

@@ -2,55 +2,116 @@ 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 { GlobalHeader } from "../../tina/__generated__/types";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
export const Header = ({ data }: { data: GlobalHeader }) => {
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>
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>
</Link>
</div>
<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"></span>
</button>
<div className={`flex items-center` } id="navbarSupportedContent">
<ul className="flex md:flex-row">
{data.nav &&
<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>
<div className={ "flex items-center" } id="navbarSupportedContent">
<ul className="flex md:flex-row">
{ data.nav &&
data.nav.map((item, i) => {
/*const activeItem =
/* const activeItem =
(item.href === ""
? router.asPath === "/"
: router.asPath.includes(item.href)) && isClient;*/
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>
);
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"
}
]
}]
};