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

Added stat cards and sequenced animations for home page

Browse source
This commit is contained in:
qt-coder 2021-06-30 09:37:09 +08:00
parent 88205038a1
commit e61c74087f
4 changed files with 116 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/Card.js
View file

@ -1,15 +1,26 @@
import React from 'react'
import Link from 'next/link'
import {Text, Flex, Button} from '@chakra-ui/react'
import {motion} from 'framer-motion'
const MotionFlex = motion(Flex)
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
}
function Card({title, desc, link}) {
return (
<Link href={link}>
<Flex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px'>
<MotionFlex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px' variants={item}>
<Text fontSize='2xl'>{title}</Text>
<Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
<Button colorScheme='teal' variant='outline'>Learn More</Button>
</Flex>
</MotionFlex>
</Link>
)
}

60
components/StatCard.js Normal file
View file

@ -0,0 +1,60 @@
import {
Stat,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
} from "@chakra-ui/react"
import React from 'react'
import {motion} from 'framer-motion'
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
delayChildren: 0.4,
staggerChildren: 0.3
}
}
}
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
}
const MotionStatGroup = motion(StatGroup)
const MotionStat = motion(Stat)
function StatCard() {
return (
<MotionStatGroup display='flex' flexDirection='column' style={{ gap: '10px' }} variants={container}>
<MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}>
<StatLabel>User Growth</StatLabel>
<StatNumber>77</StatNumber>
<StatHelpText>
<StatArrow type="increase" />
11.36%
</StatHelpText>
</MotionStat>
<MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}>
<StatLabel>Activity</StatLabel>
<StatNumber>45 messages</StatNumber>
<StatHelpText>
<StatArrow type="decrease" />
9.05%
</StatHelpText>
</MotionStat>
</MotionStatGroup>
)
}
export default StatCard

21
pages/index.js
View file

@ -6,6 +6,7 @@ import { CTA } from '../components/CTA'
import { Features } from '../components/Features/Features'
import { Footer } from '../components/Footer/Footer'
import { motion } from 'framer-motion'
import StatCard from '../components/StatCard'
export default function Home() {
@ -21,13 +22,6 @@ export default function Home() {
}
}
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1
}
}
const [session, loading] = useSession()
@ -44,12 +38,13 @@ export default function Home() {
{session && <>
<Text fontSize='4xl'>Welcome {session.user.name}!</Text>
<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'/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<StatCard/>
</motion.div>
</>
}