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

34
pages/controlpanel/index.js
View file

@ -3,7 +3,27 @@ import Card from '../../components/Card'
import Head from 'next/head' import Head from 'next/head'
import { useSession } from 'next-auth/client' import { useSession } from 'next-auth/client'
import { Flex, Text, Spacer } from "@chakra-ui/react" 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() { function Index() {
@ -19,16 +39,16 @@ function Index() {
<Head> <Head>
<title>Cath Control Panel</title> <title>Cath Control Panel</title>
</Head> </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'> <Flex direction='column'>
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/> <Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer/> <Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/> <Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
<Spacer/> <Spacer />
<Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/> <Card title='Commands' desc='Control your commands' link='/controlpanel/commands' variants={item}/>
</Flex> </Flex>
</div> </motion.div>
</> </>
} }
</> </>

18
pages/index.js
View file

@ -4,8 +4,8 @@ import { Text } from "@chakra-ui/react"
import Hero from '../components/Hero/Hero' import Hero from '../components/Hero/Hero'
import { CTA } from '../components/CTA' import { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features' import { Features } from '../components/Features/Features'
import {Footer} from '../components/Footer/Footer' import { Footer } from '../components/Footer/Footer'
import {motion} from 'framer-motion' import { motion } from 'framer-motion'
export default function Home() { export default function Home() {
@ -43,13 +43,13 @@ export default function Home() {
} }
{session && <> {session && <>
<Text fontSize='4xl'>Welcome {session.user.name}!</Text> <Text fontSize='4xl'>Welcome {session.user.name}!</Text>
<motion.div className='grid' variants={container} initial="hidden" animate="visible"> <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} />
<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> </motion.div>
</> </>
} }