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

Added an header and other components

Browse Source
This commit is contained in:
Skydust
2023-08-28 20:22:46 +02:00
parent 52134c91ef
commit 2be7f9b705
13 changed files with 162 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/layout/footer/footer.tsx
View File

@@ -45,15 +45,6 @@ export const Footer = ({ data, icon, rawData }) => {
href="/"
className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap"
>
<Icon
parentColor={data.color}
data={{
name: icon.name,
color: data.color === "primary" ? "primary" : icon.color,
style: icon.style,
}}
className="inline-block h-10 w-auto group-hover:text-orange-500"
/>
</Link>
<div className="flex gap-4">
{data.social && data.social.facebook && (

51
components/layout/header.tsx
View File

@@ -1,36 +1,23 @@
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { Icon } from "../util/icon";
import { tinaField } from "tinacms/dist/react";
import { GlobalHeader } from "../../tina/__generated__/types";
import defaultLogo from "../../assets/img/logo.png";
import {GlobalHeader} from "../../tina/__generated__/types";
export const Header = ({ data }: { data: GlobalHeader }) => {
const router = useRouter();
const [isClient, setIsClient] = React.useState(false);
React.useEffect(() => {
setIsClient(true);
}, []);
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div className="container d-flex flex-column flex-md-row justify-content-between">
<div className="flex">
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
<div className="flex grow justify-between px-6">
<div className="flex navbar-brand">
<Link
href="/"
className="navbar-brand container d-flex align-items-md-center"
className="container flex items-center"
>
<Icon
tinaField={tinaField(data, "icon")}
parentColor={data.color}
data={{
name: data.icon.name,
color: data.icon.color,
style: data.icon.style,
}}
/>
<span data-tina-field={tinaField(data, "name")}>{data.name}</span>
<img src={ data.logoSrc || defaultLogo.src }/>
<div className="flex flex-col">
<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>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -38,8 +25,8 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul className="navbar-nav d-flex flex-column flex-md-row">
<div className={`flex items-center` } id="navbarSupportedContent">
<ul className="flex md:flex-row">
{data.nav &&
data.nav.map((item, i) => {
/*const activeItem =
@@ -53,24 +40,16 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
>
<Link
data-tina-field={tinaField(item, "label")}
href={`/${item.href}`}
className="nav-link p-2"
href={`${ item.external? "" : "/" }${ item.href }`}
className={`nav-link p-2 ${ item.external ? "external-link-icon" : ""}`}
>
{item.label}
</Link>
</li>
);
})}
<li className="nav-item">
<a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
</li>
</ul>
</div>
<div
className={`absolute h-1 bg-gradient-to-r from-transparent ${
data.color === "primary" ? `via-white` : `via-black dark:via-white`
} to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
/>
</div>
</nav>
);