From bfc836ab98444d699e8ce697e247ed1df38ac734 Mon Sep 17 00:00:00 2001
From: qt-coder <chuchenkhang@gmail.com>
Date: Mon, 28 Jun 2021 08:28:53 +0800
Subject: [PATCH] Changed cards to use Chakra UI

---
 components/Card.js          | 37 +++++++----------------------
 components/CardContainer.js | 47 -------------------------------------
 pages/controlpanel/index.js | 17 +++++++++-----
 3 files changed, 19 insertions(+), 82 deletions(-)
 delete mode 100644 components/CardContainer.js

diff --git a/components/Card.js b/components/Card.js
index 61d5f96..3ebf525 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -1,38 +1,17 @@
-import { makeStyles } from '@material-ui/core'
 import React from 'react'
 import Link from 'next/link'
+import {Text, Flex, Button} from '@chakra-ui/react'
 
-const useStyles = makeStyles({
-    homeCard: {
-        width: '300px',
-        height: '150px',
-        background: '#1f1b24',
-        margin: '10px',
-        padding: '20px',
-        borderRadius: '15px',
-
-        '&:hover': {
-            background: '#2c2633',
-        }
-    },
-    title: {
-        marginTop: '3px',
-    },
-    desc: {}
-})
-
-function HomeCard({title, desc, link=''}) {
-
-    const classes = useStyles()
-
+function Card({title, desc, link}) {
     return (
         <Link href={link}>
-            <div className={classes.homeCard}>
-                <h1 className={classes.title}>{title}</h1>
-                <p className={classes.desc}>{desc}</p>
-            </div>
+            <Flex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px'>
+                <Text fontSize='2xl'>{title}</Text>
+                <Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
+                <Button colorScheme='teal' variant='outline'>Learn More</Button>
+            </Flex>
         </Link>
     )
 }
 
-export default HomeCard
+export default Card
diff --git a/components/CardContainer.js b/components/CardContainer.js
deleted file mode 100644
index cd00b17..0000000
--- a/components/CardContainer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import Link from 'next/link'
-
-const useStyles = makeStyles({
-    root: {
-        minWidth: 275,
-    },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
-    },
-    title: {
-        fontSize: 14,
-    },
-    pos: {
-        marginBottom: 12,
-    },
-});
-
-export default function CardContainer(props) {
-    const classes = useStyles();
-
-    return (
-        <a href={props.link}>
-            <Card className={classes.root} style={{ background: '#1F1B24', border: '2px solid #00c7b6' }}>
-                <CardContent>
-                    <Typography variant="h5" component="h2">
-                        {props.title}
-                    </Typography>
-                    <Typography variant="body2" component="p">
-                        {props.children}
-                    </Typography>
-                </CardContent>
-                <CardActions>
-                    <Button size="small">Learn More</Button>
-                </CardActions>
-            </Card>
-        </a>
-    );
-}
\ No newline at end of file
diff --git a/pages/controlpanel/index.js b/pages/controlpanel/index.js
index 721339b..ef4a3c6 100644
--- a/pages/controlpanel/index.js
+++ b/pages/controlpanel/index.js
@@ -2,14 +2,15 @@ import React from 'react'
 import Card from '../../components/Card'
 import Head from 'next/head'
 import { useSession } from 'next-auth/client'
-import { Text } from "@chakra-ui/react"
+import { Flex, Text, Spacer } from "@chakra-ui/react"
+
 
 function Index() {
 
     const [session, loading] = useSession()
 
     return (
-        <>
+        <>  
             {!session && <>
                 <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
             </>
@@ -19,10 +20,14 @@ function Index() {
                     <title>Cath Control Panel</title>
                 </Head>
                 <div>
-                    <Text fontSize='4xl'>Control Panel</Text>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                    <Text fontSize='4xl' marginBottom='15'>Control Panel</Text>
+                    <Flex direction='column'>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
+                        <Spacer/>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
+                        <Spacer/>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
+                    </Flex>
                 </div>
             </>
             }