Linted the whole project with eslint
This commit was merged in pull request #3.
This commit is contained in:
@@ -4,109 +4,143 @@ import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
|
||||
import { AiFillInstagram } from "react-icons/ai";
|
||||
import { Container } from "../../util/container";
|
||||
import { RawRenderer } from "./rawRenderer";
|
||||
import { ObjectField } from "@tinacms/schema-tools/dist/types";
|
||||
|
||||
export const Footer = ({ data, 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 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:
|
||||
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",
|
||||
},
|
||||
};
|
||||
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;
|
||||
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"
|
||||
>
|
||||
</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"]
|
||||
}`}
|
||||
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"
|
||||
/>
|
||||
<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` }
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export const footerSchema: ObjectField = {
|
||||
type: "object",
|
||||
label: "Footer",
|
||||
name: "footer",
|
||||
fields: [
|
||||
{
|
||||
type: "object",
|
||||
label: "Social Links",
|
||||
name: "social",
|
||||
fields: [
|
||||
{
|
||||
type: "string",
|
||||
label: "Facebook",
|
||||
name: "facebook"
|
||||
},
|
||||
{
|
||||
type: "string",
|
||||
label: "Twitter",
|
||||
name: "twitter"
|
||||
},
|
||||
{
|
||||
type: "string",
|
||||
label: "Instagram",
|
||||
name: "instagram"
|
||||
},
|
||||
{
|
||||
type: "string",
|
||||
label: "Github",
|
||||
name: "github"
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
@@ -3,90 +3,90 @@ 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);
|
||||
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 closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
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]
|
||||
}`}
|
||||
>
|
||||
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}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
</button>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
@@ -6,39 +6,39 @@ import layoutData from "../../content/global/index.json";
|
||||
import { Global } from "../../tina/__generated__/types";
|
||||
|
||||
export const Layout = ({
|
||||
rawData = {},
|
||||
data = layoutData,
|
||||
children,
|
||||
rawData = {},
|
||||
data = layoutData,
|
||||
children
|
||||
}: {
|
||||
rawData?: object;
|
||||
data?: Omit<Global, "id" | "_sys" | "_values">;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{data?.header?.pageTitle}</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{ data?.header?.pageTitle }</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}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
<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 }
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user