learnhouse/front/components/ui/layout.tsx
2022-10-12 22:06:19 +02:00

75 lines
1.9 KiB
TypeScript

import React from "react";
import Head from "next/head";
import { Header } from "./header";
import styled from "styled-components";
import AuthProvider from "../security/AuthProvider";
import { motion } from "framer-motion";
import { Menu } from "./elements/menu";
const Layout = (props: any) => {
const variants = {
hidden: { opacity: 0, x: 0, y: 0 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: 0 },
};
return (
<div>
<AuthProvider>
<Head>
<title>{props.title}</title>
<meta name="description" content={props.description} />
<link rel="icon" href="/favicon.ico" />
</Head>
<PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
<Menu></Menu>
<motion.main
variants={variants} // Pass the variant object into Framer Motion
initial="hidden" // Set the initial state to variants.hidden
animate="enter" // Animated state to variants.enter
exit="exit" // Exit state (used later) to variants.exit
transition={{ type: "linear" }} // Set the transition to linear
className=""
>
<Main className="min-h-screen">{props.children}</Main>
</motion.main>
<Footer>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="/learnhouse_icon.png" alt="Learnhouse Logo" />
</a>
</Footer>
</AuthProvider>
</div>
);
};
const Main = styled.main`
min-height: 100vh;
`;
const Footer = styled.footer`
display: flex;
justify-content: center;
margin: 20px;
font-size: 16px;
img {
width: 20px;
opacity: 0.4;
display: inline;
}
`;
export const PreAlphaLabel = styled.div`
position: fixed;
bottom: 0;
right: 0;
padding: 9px;
background-color: #080501;
color: white;
font-size: 19px;
font-weight: bold;
border-radius: 5px 0 0 0px;
`;
export default Layout;