rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: refactor files

Browse source 
feat: refactor more files

feat: uppercase component folder 1/2

feat: uppercase component folder 2/2
This commit is contained in:
swve 2022-12-02 22:23:52 +01:00
parent a371394670
commit d361e68dc0
31 changed files with 101 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

72
front/components/UI/Layout.tsx Normal file
View file

@ -0,0 +1,72 @@
import React from "react";
import Head from "next/head";
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>
<p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
</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;