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

Cleaned up some code and added a somewhat responsive header burger
Some checks failed
A gitea test / Random test (pull_request) Has been cancelled
Details

Browse Source
This commit was merged in pull request #13.
This commit is contained in:
Skydust
2023-09-19 14:56:09 +02:00
parent f6107de735
commit e583858edb
28 changed files with 112 additions and 1527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/layout/footer/footer.tsx → components/layout/footer.tsx
View File

@@ -1,12 +1,14 @@
import React from "react";
import { Container } from "../../util/container";
import { Container } from "../util/container";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
import facebookImage from "../../../assets/img/facebook.svg";
import instagramImage from "../../../assets/img/instagram.svg";
import facebookImage from "../../public/icons/facebook.svg";
import instagramImage from "../../public/icons/instagram.svg";
import NextImage from "next/image";
import { tinaField } from "tinacms/dist/react";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { GlobalFooter } from "../../tina/__generated__/types";
export const Footer = ({ data, rawData }) => {
export const Footer = ({ data }: { data: GlobalFooter }): React.ReactElement => {
return (
<footer>
<Container className="relative" size="small">
@@ -44,26 +46,26 @@ export const Footer = ({ data, rawData }) => {
<a href={ data?.social?.facebook }
onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
className="py-2 me-2">
<img src={ facebookImage } alt="Facebook"/>
<NextImage src={ facebookImage } alt={ "Facebook" }/>
</a> }
{ data?.social?.instagram &&
<a href={ data?.social?.instagram }
onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
className="py-2">
<img src={ instagramImage } alt="Instagram"/>
<NextImage src={ instagramImage } alt={ "Facebook" }/>
</a> }
</div>
</div>
<div>
<p data-tina-field={ tinaField(data, "copyright") }>
<div className="flex flex-row" data-tina-field={ tinaField(data, "copyright") }>
&copy; { data?.copyright?.year }
{ data?.copyright?.subtext?.children?.length > 0 &&
<> &#8211;<div className={ "ml-1 float-right" }>
<> &#8211;<span className={ "ml-1" }>
<TinaMarkdown content={ data.copyright?.subtext } />
</div>
</span>
</> }
</p>
</div>
</div>
</div>
</Container>

1
components/layout/footer/index.tsx
View File

@@ -1 +0,0 @@
export { Footer } from "./footer";

92
components/layout/footer/rawRenderer.tsx
View File

@@ -1,92 +0,0 @@
import React from "react";
import { Fragment, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
export const RawRenderer = ({ rawData, parentColor }) => {
const buttonColorClasses = {
blue: "text-blue-500",
teal: "text-teal-500",
green: "text-green-500",
red: "text-red-500",
pink: "text-pink-500",
purple: "text-purple-500",
orange: "text-orange-500",
yellow: "text-yellow-600"
};
const [isOpen, setIsOpen] = useState(false);
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<>
<button
type="button"
onClick={ openModal }
className={ `z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
buttonColorClasses[buttonColorClasses.blue]
}` }
>
View Raw Data
<span
className={ `absolute w-full h-full left-0 top-0 rounded -z-1 ${
parentColor === "primary"
? "bg-white opacity-80"
: "bg-current opacity-15"
}` }
/>
</button>
<Transition appear show={ isOpen } as={ Fragment }>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
onClose={ closeModal }
>
<div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
<Transition.Child
as={ Fragment }
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="">
<Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
</div>
</Transition.Child>
<Transition.Child
as={ Fragment }
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
<pre className="flex-1 overflow-y-auto">
<code>{ JSON.stringify(rawData, null, 2) }</code>
</pre>
<button
type="button"
className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
onClick={ closeModal }
>
Great, thanks!
</button>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
);
};

24
components/layout/header.tsx
View File

@@ -1,20 +1,23 @@
import React from "react";
import React, { useState } 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"
export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
const [expanded, setExpanded] = useState(false);
const navbarToggler: React.ReactElement = (
<button
className="navbar-toggler"
type="button"
onClick={ () => { setExpanded(!expanded); } }
aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
);
return (
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
<nav className={ `navbar${ expanded ? " navbar-expanded": "" } 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
@@ -29,9 +32,8 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
</Link>
</div>
{ navbarToggler }
<div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
<ul className="flex md:flex-row">
{ data.nav &&
<ul className="navbar-items">
{ data.nav &&
data.nav.map((item, i) => {
return (
<li
@@ -42,14 +44,14 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
data-tina-field={ tinaField(item, "label") }
href={ `${ item.external? "" : "/" }${ item.href }` }
className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
onClick={ () => setExpanded(false) }
>
{ item.label }
</Link>
</li>
);
}) }
</ul>
</div>
</ul>
</div>
</nav>
);

1
components/layout/index.tsx
View File

@@ -1 +0,0 @@
export { Layout } from "./layout";

5
components/layout/layout.tsx
View File

@@ -34,10 +34,7 @@ export const Layout = ({
<div className="flex-1 flex flex-col">
{ children }
</div>
<Footer
rawData={ rawData }
data={ data?.footer }
/>
<Footer data={ data?.footer } />
</div>
</>
);