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 React from 'react'
import Link from 'next/link' import Link from 'next/link'
import {Text, Flex, Button} from '@chakra-ui/react' 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}) { function Card({title, desc, link}) {
return ( return (
<Link href={link}> <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='2xl'>{title}</Text>
<Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text> <Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
<Button colorScheme='teal' variant='outline'>Learn More</Button> <Button colorScheme='teal' variant='outline'>Learn More</Button>
</Flex> </MotionFlex>
</Link> </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

70
pages/controlpanel/commands.js
View file

@ -15,7 +15,7 @@ import { useSession } from 'next-auth/client'
import axios from 'axios' import axios from 'axios'
function Controller({initialState}) { function Controller({ initialState }) {
const [online, setOnline] = React.useState(initialState) const [online, setOnline] = React.useState(initialState)
return ( return (
@ -35,10 +35,10 @@ function Commands() {
const [categories, setCategories] = React.useState( const [categories, setCategories] = React.useState(
[ [
{command: 'Help', online: true}, { command: 'Help', online: true },
{command: 'Help', online: true}, { command: 'Help', online: true },
{command: 'Help', online: true}, { command: 'Help', online: true },
{command: 'Help', online: true}, { command: 'Help', online: true },
] ]
) )
@ -51,35 +51,35 @@ function Commands() {
return ( return (
<> <>
{session && {session &&
<> <>
<Head> <Head>
<title>Cath Commands</title> <title>Cath Commands</title>
</Head> </Head>
<Table variant="simple"> <Table variant="simple">
<TableCaption>Command Controls</TableCaption> <TableCaption>Command Controls</TableCaption>
<Thead> <Thead>
<Tr> <Tr>
<Th>Command</Th> <Th>Command</Th>
<Th>Enabled</Th> <Th>Enabled</Th>
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{categories.map((category, idx) => ( {categories.map((category, idx) => (
<> <>
<Text fontSize='3xl'>{category.name}</Text> <Text fontSize='3xl'>{category.name}</Text>
{category.commands.map((command, commandIdx)=> ( {category.commands.map((command, commandIdx) => (
<Tr key={commandIdx}> <Tr key={commandIdx}>
<Td>{command.name}</Td> <Td>{command.name}</Td>
<Td> <Td>
<Controller initialState={command.online} /> <Controller initialState={command.online} />
</Td> </Td>
</Tr> </Tr>
))} ))}
</> </>
))} ))}
</Tbody> </Tbody>
</Table> </Table>
</> </>
} {!session && <> } {!session && <>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1> <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</> </>
@ -88,4 +88,4 @@ function Commands() {
); );
} }
export default Commands export default Commands

21
pages/index.js
View file

@ -6,6 +6,7 @@ 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'
import StatCard from '../components/StatCard'
export default function Home() { 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() const [session, loading] = useSession()
@ -44,12 +38,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" exit={{ opacity: 0 }}> <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'/>
<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' 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' 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' 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' variants={item} /> <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
<StatCard/>
</motion.div> </motion.div>
</> </>
} }