diff options
Diffstat (limited to 'src/core/components/layouts')
| -rw-r--r-- | src/core/components/layouts/AnimationLayout.jsx | 24 | ||||
| -rw-r--r-- | src/core/components/layouts/AppLayout.jsx | 17 | ||||
| -rw-r--r-- | src/core/components/layouts/BasicLayout.jsx | 17 |
3 files changed, 58 insertions, 0 deletions
diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx new file mode 100644 index 00000000..c4dee606 --- /dev/null +++ b/src/core/components/layouts/AnimationLayout.jsx @@ -0,0 +1,24 @@ +import { motion } from 'framer-motion' + +const AnimationLayout = ({ children, ...props }) => { + const transition = { + ease: 'easeIn', + duration: 0.2 + } + + return ( + children && ( + <motion.main + initial={{ opacity: 0, x: 0, y: 0 }} + animate={{ opacity: 1, x: 0, y: 0 }} + exit={{ opacity: 0, x: 30, y: 0 }} + transition={transition} + {...props} + > + {children} + </motion.main> + ) + ) +} + +export default AnimationLayout diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx new file mode 100644 index 00000000..a325b1c1 --- /dev/null +++ b/src/core/components/layouts/AppLayout.jsx @@ -0,0 +1,17 @@ +import AppBar from '../elements/Appbar/Appbar' +import BasicFooter from '../elements/Footer/BasicFooter' +import AnimationLayout from './AnimationLayout' + +const AppLayout = ({ children, title }) => { + return ( + <> + <AnimationLayout> + <AppBar title={title} /> + {children} + </AnimationLayout> + <BasicFooter /> + </> + ) +} + +export default AppLayout diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx new file mode 100644 index 00000000..1a7185cd --- /dev/null +++ b/src/core/components/layouts/BasicLayout.jsx @@ -0,0 +1,17 @@ +import dynamic from 'next/dynamic' +import BasicFooter from '../elements/Footer/BasicFooter' + +const Navbar = dynamic(() => import('../elements/Navbar/Navbar')) +const AnimationLayout = dynamic(() => import('./AnimationLayout')) + +const BasicLayout = ({ children }) => { + return ( + <> + <Navbar /> + <AnimationLayout>{children}</AnimationLayout> + <BasicFooter /> + </> + ) +} + +export default BasicLayout |
