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

Changed cards to use Chakra UI

Browse source
This commit is contained in:
qt-coder 2021-06-28 08:28:53 +08:00
parent 38a32b824b
commit bfc836ab98
3 changed files with 19 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
components/Card.js
View file

@ -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

47
components/CardContainer.js
View file

@ -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>
);
}

15
pages/controlpanel/index.js
View file

@ -2,7 +2,8 @@ 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() {
@ -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>
</>
}