2022-12-13 07:00:49 -05:00
|
|
|
import {
|
|
|
|
|
AnimatePresence,
|
|
|
|
|
domAnimation,
|
|
|
|
|
LazyMotion,
|
|
|
|
|
m,
|
|
|
|
|
Variants,
|
|
|
|
|
} from "framer-motion";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
|
import NavBar from "../components/dashboard/NavBar";
|
|
|
|
|
|
|
|
|
|
interface DashLayoutProps {
|
|
|
|
|
children: React.ReactNode;
|
2023-01-31 21:35:23 -05:00
|
|
|
navIcon?: string;
|
2023-01-26 05:20:07 -05:00
|
|
|
metaTags: {
|
|
|
|
|
title?: string;
|
|
|
|
|
ogTitle?: string;
|
|
|
|
|
description?: string;
|
|
|
|
|
ogDescription?: string;
|
|
|
|
|
content?: string;
|
|
|
|
|
imageUrl?: string;
|
|
|
|
|
themeColor?: string;
|
|
|
|
|
misc?: {
|
|
|
|
|
[key: string]: string;
|
|
|
|
|
};
|
|
|
|
|
};
|
2022-12-13 07:00:49 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function DashLayout(props: DashLayoutProps) {
|
|
|
|
|
// get the current route for animation purposes
|
|
|
|
|
const router = useRouter();
|
2023-01-26 05:20:07 -05:00
|
|
|
const title = props.metaTags.title ?? "Dashboard - toffee";
|
2022-12-13 07:00:49 -05:00
|
|
|
return (
|
2022-12-24 18:35:35 -05:00
|
|
|
<m.div
|
2022-12-31 05:22:27 -05:00
|
|
|
className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
|
2022-12-24 18:35:35 -05:00
|
|
|
initial="initial"
|
|
|
|
|
animate="animate"
|
|
|
|
|
exit="exit"
|
|
|
|
|
variants={containerVariants}
|
|
|
|
|
>
|
2022-12-13 07:00:49 -05:00
|
|
|
<Head>
|
2023-01-20 21:24:31 -05:00
|
|
|
<meta name="viewport" content="initial-scale=0.8" />
|
2023-01-26 05:20:07 -05:00
|
|
|
<title>{title}</title>
|
|
|
|
|
<meta
|
|
|
|
|
name="description"
|
|
|
|
|
content={
|
|
|
|
|
props.metaTags.description ?? "Dashboard statistics for toffee"
|
|
|
|
|
}
|
|
|
|
|
/>
|
2022-12-13 07:00:49 -05:00
|
|
|
<link rel="icon" href="/favicon.ico" />
|
2023-01-26 05:20:07 -05:00
|
|
|
<meta
|
|
|
|
|
name="theme-color"
|
|
|
|
|
content={props.metaTags.themeColor ?? "#c084fc"}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:title"
|
|
|
|
|
content={props.metaTags.ogTitle ?? props.metaTags.title ?? "toffee"}
|
|
|
|
|
/>
|
2022-12-13 07:00:49 -05:00
|
|
|
<meta
|
|
|
|
|
property="og:description"
|
2023-01-26 05:20:07 -05:00
|
|
|
content={
|
|
|
|
|
props.metaTags.ogDescription ??
|
|
|
|
|
props.metaTags.description ??
|
|
|
|
|
"Dashboard statistics for toffee"
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
|
|
|
|
content={props.metaTags.imageUrl ?? "/img/logo.webp"}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:type"
|
|
|
|
|
content={props.metaTags.content ?? "website"}
|
2022-12-13 07:00:49 -05:00
|
|
|
/>
|
2022-12-31 05:22:27 -05:00
|
|
|
<meta property="og:site_name" content="toffee" />
|
2023-01-26 05:20:07 -05:00
|
|
|
{props.metaTags.misc &&
|
|
|
|
|
Object.keys(props.metaTags.misc).map((key) => {
|
|
|
|
|
return (
|
|
|
|
|
<meta
|
|
|
|
|
key={key}
|
|
|
|
|
property={key}
|
|
|
|
|
content={props.metaTags.misc ? props.metaTags.misc[key] : ""}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
})}
|
2022-12-13 07:00:49 -05:00
|
|
|
</Head>
|
|
|
|
|
|
2022-12-20 09:38:26 -05:00
|
|
|
<div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">
|
2022-12-13 07:00:49 -05:00
|
|
|
{/* dashboard nav bar */}
|
|
|
|
|
<LazyMotion features={domAnimation}>
|
|
|
|
|
<AnimatePresence mode="wait">
|
2023-01-31 21:35:23 -05:00
|
|
|
<NavBar initialPage={props.navIcon ?? ""} />
|
2022-12-13 07:00:49 -05:00
|
|
|
</AnimatePresence>
|
|
|
|
|
</LazyMotion>
|
|
|
|
|
{/* dashboard content */}
|
|
|
|
|
<LazyMotion features={domAnimation}>
|
|
|
|
|
<AnimatePresence mode="wait">
|
|
|
|
|
<m.div
|
|
|
|
|
key={router.route.concat("layout-fade")}
|
2022-12-20 09:38:26 -05:00
|
|
|
className="w-screen overflow-y-scroll"
|
2022-12-13 07:00:49 -05:00
|
|
|
variants={containerVariants}
|
|
|
|
|
initial="initial"
|
|
|
|
|
animate="animate"
|
|
|
|
|
exit="exit"
|
|
|
|
|
>
|
|
|
|
|
{props.children}
|
|
|
|
|
</m.div>
|
|
|
|
|
</AnimatePresence>
|
|
|
|
|
</LazyMotion>
|
|
|
|
|
</div>
|
2022-12-24 18:35:35 -05:00
|
|
|
</m.div>
|
2022-12-13 07:00:49 -05:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const containerVariants: Variants = {
|
|
|
|
|
initial: { opacity: 0 },
|
|
|
|
|
animate: { opacity: 1 },
|
|
|
|
|
exit: { opacity: 0 },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default DashLayout;
|
