110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
|
import { useAuth } from '@/hooks/auth'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import { useCallback } from 'react'
|
||
|
|
import Particles from 'react-tsparticles'
|
||
|
|
import { loadFull } from 'tsparticles'
|
||
|
|
import packageJson from './../package.json'
|
||
|
|
import { Menu } from './Menu'
|
||
|
|
import { Navbar } from './Navbar'
|
||
|
|
|
||
|
|
export const Depan = ({ children }) => {
|
||
|
|
useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard' })
|
||
|
|
|
||
|
|
/** PARTICLES */
|
||
|
|
const particlesInit = useCallback(async (engine) => {
|
||
|
|
await loadFull(engine)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='flex h-screen'>
|
||
|
|
<div className='kiri w-9/12 relative hidden md:block'>
|
||
|
|
<div className='relative h-screen'>
|
||
|
|
<Image src={'/img/bg-login.jpg'} alt='bg-login' layout='fill' objectFit='cover' priority />
|
||
|
|
</div>
|
||
|
|
<Particles
|
||
|
|
id='tsparticles'
|
||
|
|
init={particlesInit}
|
||
|
|
options={{
|
||
|
|
fpsLimit: 60,
|
||
|
|
interactivity: {
|
||
|
|
events: {
|
||
|
|
onHover: {
|
||
|
|
enable: true,
|
||
|
|
mode: 'grab',
|
||
|
|
},
|
||
|
|
resize: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
particles: {
|
||
|
|
color: {
|
||
|
|
value: '#ffffff',
|
||
|
|
},
|
||
|
|
links: {
|
||
|
|
color: '#ffffff',
|
||
|
|
distance: 130,
|
||
|
|
enable: true,
|
||
|
|
opacity: 1,
|
||
|
|
width: 1,
|
||
|
|
},
|
||
|
|
collisions: {
|
||
|
|
enable: true,
|
||
|
|
},
|
||
|
|
move: {
|
||
|
|
directions: 'none',
|
||
|
|
enable: true,
|
||
|
|
outModes: {
|
||
|
|
default: 'bounce',
|
||
|
|
},
|
||
|
|
random: false,
|
||
|
|
speed: 2,
|
||
|
|
straight: false,
|
||
|
|
},
|
||
|
|
number: {
|
||
|
|
density: {
|
||
|
|
enable: true,
|
||
|
|
area: 800,
|
||
|
|
},
|
||
|
|
value: 50,
|
||
|
|
},
|
||
|
|
opacity: {
|
||
|
|
value: 0.5,
|
||
|
|
},
|
||
|
|
shape: {
|
||
|
|
type: 'circle',
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
value: { min: 1, max: 5 },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
detectRetina: true,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className='absolute left-1/2 -translate-x-1/2 bottom-10 text-white flex gap-1 text-xs 2xl:text-base'>
|
||
|
|
<p>Copyright © 2022</p>
|
||
|
|
<p className=''>SISTEM APLIKASI VERIFIKASI ANGGARAN BKN RI</p>
|
||
|
|
</div>
|
||
|
|
<div className='absolute left-1/2 -translate-x-1/2 bottom-6 text-white flex gap-1 text-xs 2xl:text-base'>
|
||
|
|
<p>V{packageJson.version}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className='kanan bg-abu md:w-3/12 px-7 relative'>{children}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Belakang = ({ children }) => {
|
||
|
|
useAuth({ middleware: 'auth' })
|
||
|
|
return (
|
||
|
|
<div className=''>
|
||
|
|
<Navbar />
|
||
|
|
<Menu />
|
||
|
|
<div className='content 2xl:mx-72 mx-20 my-10'>{children}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const LandingPageLayout = ({ children }) => {
|
||
|
|
return <div className='md:grid md:grid-cols-1 items-center md:px-32 md:gap-3 gap-y-3 py-5 mx-3'>{children}</div>
|
||
|
|
}
|