Initial commit
This commit is contained in:
122
components/layout/footer/footer.tsx
Normal file
122
components/layout/footer/footer.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
|
||||
import { AiFillInstagram } from "react-icons/ai";
|
||||
import { Container } from "../../util/container";
|
||||
import { RawRenderer } from "./rawRenderer";
|
||||
import { Icon } from "../../util/icon";
|
||||
|
||||
export const Footer = ({ data, icon, rawData }) => {
|
||||
const socialIconClasses = "h-7 w-auto";
|
||||
const socialIconColorClasses = {
|
||||
blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
|
||||
teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
|
||||
green: "text-green-500 dark:text-green-400 hover:text-green-300",
|
||||
red: "text-red-500 dark:text-red-400 hover:text-red-300",
|
||||
pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
|
||||
purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
|
||||
orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
|
||||
yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
|
||||
primary: "text-white opacity-80 hover:opacity-100",
|
||||
};
|
||||
|
||||
const footerColor = {
|
||||
default:
|
||||
"text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000",
|
||||
primary: {
|
||||
blue: "text-white from-blue-500 to-blue-700",
|
||||
teal: "text-white from-teal-500 to-teal-600",
|
||||
green: "text-white from-green-500 to-green-600",
|
||||
red: "text-white from-red-500 to-red-600",
|
||||
pink: "text-white from-pink-500 to-pink-600",
|
||||
purple: "text-white from-purple-500 to-purple-600",
|
||||
orange: "text-white from-orange-500 to-orange-600",
|
||||
yellow: "text-white from-yellow-500 to-yellow-600",
|
||||
},
|
||||
};
|
||||
|
||||
const footerColorCss = footerColor.default;
|
||||
|
||||
return (
|
||||
<footer className={`bg-gradient-to-br ${footerColorCss}`}>
|
||||
<Container className="relative" size="small">
|
||||
<div className="flex justify-between items-center gap-6 flex-wrap">
|
||||
<Link
|
||||
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 && (
|
||||
<a
|
||||
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
||||
href={data.social.facebook}
|
||||
target="_blank"
|
||||
>
|
||||
<FaFacebookF
|
||||
className={`${socialIconClasses} ${
|
||||
socialIconColorClasses["primary"]
|
||||
}`}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{data.social && data.social.twitter && (
|
||||
<a
|
||||
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
||||
href={data.social.twitter}
|
||||
target="_blank"
|
||||
>
|
||||
<FaTwitter
|
||||
className={`${socialIconClasses} ${
|
||||
socialIconColorClasses["primary"]
|
||||
}`}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{data.social && data.social.instagram && (
|
||||
<a
|
||||
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
||||
href={data.social.instagram}
|
||||
target="_blank"
|
||||
>
|
||||
<AiFillInstagram
|
||||
className={`${socialIconClasses} ${
|
||||
socialIconColorClasses["primary"]
|
||||
}`}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{data.social && data.social.github && (
|
||||
<a
|
||||
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
|
||||
href={data.social.github}
|
||||
target="_blank"
|
||||
>
|
||||
<FaGithub
|
||||
className={`${socialIconClasses} ${
|
||||
socialIconColorClasses["primary"]
|
||||
}`}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<RawRenderer parentColor={data.color} rawData={rawData} />
|
||||
</div>
|
||||
<div
|
||||
className={`absolute h-1 bg-gradient-to-r from-transparent ${
|
||||
data.color === "primary" ? `via-white` : `via-black dark:via-white`
|
||||
} to-transparent top-0 left-4 right-4 opacity-5`}
|
||||
></div>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
1
components/layout/footer/index.tsx
Normal file
1
components/layout/footer/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { Footer } from "./footer";
|
||||
92
components/layout/footer/rawRenderer.tsx
Normal file
92
components/layout/footer/rawRenderer.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
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`
|
||||
}`}
|
||||
></span>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
77
components/layout/header.tsx
Normal file
77
components/layout/header.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
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";
|
||||
|
||||
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">
|
||||
<Link
|
||||
href="/"
|
||||
className="navbar-brand container d-flex align-items-md-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>
|
||||
</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="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav d-flex flex-column flex-md-row">
|
||||
{data.nav &&
|
||||
data.nav.map((item, i) => {
|
||||
/*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.href}`}
|
||||
className="nav-link p-2"
|
||||
>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
1
components/layout/index.tsx
Normal file
1
components/layout/index.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { Layout } from "./layout";
|
||||
45
components/layout/layout.tsx
Normal file
45
components/layout/layout.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import { Header } from "./header";
|
||||
import { Footer } from "./footer";
|
||||
import layoutData from "../../content/global/index.json";
|
||||
import { Global } from "../../tina/__generated__/types";
|
||||
|
||||
export const Layout = ({
|
||||
rawData = {},
|
||||
data = layoutData,
|
||||
children,
|
||||
}: {
|
||||
rawData?: object;
|
||||
data?: Omit<Global, "id" | "_sys" | "_values">;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Tina</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<div
|
||||
className={"min-h-screen flex flex-col font-nunito" }
|
||||
>
|
||||
<Header data={data?.header} />
|
||||
<div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">
|
||||
{children}
|
||||
</div>
|
||||
<Footer
|
||||
rawData={rawData}
|
||||
data={data?.footer}
|
||||
icon={data?.header.icon}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user