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

70
pages/controlpanel/commands.js
View file

@ -15,7 +15,7 @@ import { useSession } from 'next-auth/client'
import axios from 'axios'
function Controller({initialState}) {
function Controller({ initialState }) {
const [online, setOnline] = React.useState(initialState)
return (
@ -35,10 +35,10 @@ function Commands() {
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 (
<>
{session &&
<>
<Head>
<title>Cath Commands</title>
</Head>
<Table variant="simple">
<TableCaption>Command Controls</TableCaption>
<Thead>
<Tr>
<Th>Command</Th>
<Th>Enabled</Th>
</Tr>
</Thead>
<Tbody>
{categories.map((category, idx) => (
<>
<Text fontSize='3xl'>{category.name}</Text>
{category.commands.map((command, commandIdx)=> (
<Tr key={commandIdx}>
<Td>{command.name}</Td>
<Td>
<Controller initialState={command.online} />
</Td>
</Tr>
))}
</>
))}
</Tbody>
</Table>
</>
<>
<Head>
<title>Cath Commands</title>
</Head>
<Table variant="simple">
<TableCaption>Command Controls</TableCaption>
<Thead>
<Tr>
<Th>Command</Th>
<Th>Enabled</Th>
</Tr>
</Thead>
<Tbody>
{categories.map((category, idx) => (
<>
<Text fontSize='3xl'>{category.name}</Text>
{category.commands.map((command, commandIdx) => (
<Tr key={commandIdx}>
<Td>{command.name}</Td>
<Td>
<Controller initialState={command.online} />
</Td>
</Tr>
))}
</>
))}
</Tbody>
</Table>
</>
} {!session && <>
<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 { 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>
</>
}