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

Replaced old card with new one

Browse source 
Remade card to have a better feel
This commit is contained in:
qt coder 2021-06-24 16:48:39 +08:00
parent 2ebf5183b8
commit 5eafb64efd
5 changed files with 64 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/Card.js Normal file
View file

@ -0,0 +1,38 @@
import { makeStyles } from '@material-ui/core'
import React from 'react'
import Link from 'next/link'
const useStyles = makeStyles({
homeCard: {
width: '350px',
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()
return (
<Link href={link}>
<div className={classes.homeCard}>
<h1 className={classes.title}>{title}</h1>
<p className={classes.desc}>{desc}</p>
</div>
</Link>
)
}
export default HomeCard

6
pages/controlpanel/index.js
View file

@ -1,5 +1,5 @@
import React from 'react'
import CardContainer from '../../components/CardContainer'
import Card from '../../components/Card'
import Head from 'next/head'
import { useSession } from 'next-auth/client'
@ -19,7 +19,9 @@ function Index() {
</Head>
<div>
<h1>Control Panel</h1>
<CardContainer link='/controlpanel/commands'>Commands</CardContainer>
<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'/>
</div>
</>
}

12
pages/index.js
View file

@ -1,5 +1,6 @@
import { Typography } from '@material-ui/core'
import CardContainer from '../components/CardContainer'
import Card from '../components/Card'
import { useSession } from 'next-auth/client'
export default function Home() {
@ -16,11 +17,12 @@ export default function Home() {
{session && <>
<h1>Welcome {session.user.name}!</h1>
<div className='grid'>
<CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
<CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
<CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
<CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
<CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
<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'/>
</div>
</>
}

10
styles/HomeCard.module.css Normal file
View file

@ -0,0 +1,10 @@
.home-card {
width: 300px;
height: 150px;
background: #1f1b24;
border: 1px solid blue;
}
.title {}
.desc {}

7
styles/globals.css
View file

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap');
* {
color: #fff;
}
@ -6,7 +8,7 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: #121212;
}
@ -38,7 +40,8 @@ a {
}
.grid {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px;
}