night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added animation to control panel

Browse source
This commit is contained in:
qt-coder 2021-06-29 10:01:14 +08:00
parent 0462412847
commit 7e434806e0
2 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
pages/controlpanel/index.js
View file

@ -3,14 +3,34 @@ import Card from '../../components/Card'
import Head from 'next/head'
import { useSession } from 'next-auth/client'
import { Flex, Text, Spacer } from "@chakra-ui/react"
import {motion} from 'framer-motion'
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.3,
staggerChildren: 0.2
}
}
}
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
}
function Index() {
const [session, loading] = useSession()
return (
<>
<>
{!session && <>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</>
@ -19,20 +39,20 @@ function Index() {
<Head>
<title>Cath Control Panel</title>
</Head>
<div>
<Text fontSize='4xl' marginBottom='15'>Control Panel</Text>
<Text fontSize='4xl' marginBottom='15'>Control Panel</Text>
<motion.div variants={container} initial="hidden" animate="visible" exit={{opacity: 0}}>
<Flex direction='column'>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
<Spacer/>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
<Spacer/>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
</Flex>
</div>
</motion.div>
</>
}
</>
)
}
export default Index
export default Index

20
pages/index.js
View file

@ -4,8 +4,8 @@ import { Text } from "@chakra-ui/react"
import Hero from '../components/Hero/Hero'
import { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features'
import {Footer} from '../components/Footer/Footer'
import {motion} from 'framer-motion'
import { Footer } from '../components/Footer/Footer'
import { motion } from 'framer-motion'
export default function Home() {
@ -43,16 +43,16 @@ export default function Home() {
}
{session && <>
<Text fontSize='4xl'>Welcome {session.user.name}!</Text>
<motion.div className='grid' variants={container} initial="hidden" animate="visible">
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item}/>
<motion.div className='grid' variants={container} initial="hidden" animate="visible" exit={{ opacity: 0 }}>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
</motion.div>
</>
}
</>
)
}
}