From e61c74087f7847b75cbf6981536792ea9aa5a304 Mon Sep 17 00:00:00 2001
From: qt-coder <chuchenkhang@gmail.com>
Date: Wed, 30 Jun 2021 09:37:09 +0800
Subject: [PATCH] Added stat cards and sequenced animations for home page

---
 components/Card.js             | 15 +++++++-
 components/StatCard.js         | 60 +++++++++++++++++++++++++++++
 pages/controlpanel/commands.js | 70 +++++++++++++++++-----------------
 pages/index.js                 | 21 ++++------
 4 files changed, 116 insertions(+), 50 deletions(-)
 create mode 100644 components/StatCard.js

diff --git a/components/Card.js b/components/Card.js
index 3ebf525..9011aa9 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -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>
     )
 }
diff --git a/components/StatCard.js b/components/StatCard.js
new file mode 100644
index 0000000..f00fa2c
--- /dev/null
+++ b/components/StatCard.js
@@ -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
diff --git a/pages/controlpanel/commands.js b/pages/controlpanel/commands.js
index f838ee8..633c3f7 100644
--- a/pages/controlpanel/commands.js
+++ b/pages/controlpanel/commands.js
@@ -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
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 6dfa3c3..de75526 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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>
       </>
       }