Added some margin to home page card grid
This commit is contained in:
parent
5eafb64efd
commit
c857c40fbd
3 changed files with 74 additions and 73 deletions
|
@ -4,7 +4,7 @@ import Link from 'next/link'
|
|||
|
||||
const useStyles = makeStyles({
|
||||
homeCard: {
|
||||
width: '350px',
|
||||
width: '300px',
|
||||
height: '150px',
|
||||
background: '#1f1b24',
|
||||
margin: '10px',
|
||||
|
|
|
@ -1,72 +1,72 @@
|
|||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableCell from '@material-ui/core/TableCell';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Head from 'next/head'
|
||||
import { useSession } from 'next-auth/client'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function createData(name, description, status) {
|
||||
return { name, description, status };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
];
|
||||
|
||||
function Commands() {
|
||||
const [session, loading] = useSession()
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
{session &&
|
||||
<>
|
||||
<Head>
|
||||
<title>Cath Commands</title>
|
||||
</Head>
|
||||
<TableContainer component={Paper} style={{ background: '#1F1B24' }}>
|
||||
<Table className={classes.table} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={{ color: '#fff' }}>Commands</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>Description</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>Status</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell component="th" scope="row" style={{ color: '#fff' }}>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>{row.description}</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>{row.status ? 'Online' : 'Offline'}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
} {!session && <>
|
||||
<h1>Seems like you're not logged in. Log in to get started!</h1>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Commands
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import TableBody from '@material-ui/core/TableBody';
|
||||
import TableCell from '@material-ui/core/TableCell';
|
||||
import TableContainer from '@material-ui/core/TableContainer';
|
||||
import TableHead from '@material-ui/core/TableHead';
|
||||
import TableRow from '@material-ui/core/TableRow';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Head from 'next/head'
|
||||
import { useSession } from 'next-auth/client'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function createData(name, description, status) {
|
||||
return { name, description, status };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
createData('Command', 'Description', true),
|
||||
];
|
||||
|
||||
function Commands() {
|
||||
const [session, loading] = useSession()
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
{session &&
|
||||
<>
|
||||
<Head>
|
||||
<title>Cath Commands</title>
|
||||
</Head>
|
||||
<TableContainer component={Paper} style={{ background: '#1F1B24' }}>
|
||||
<Table className={classes.table} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={{ color: '#fff' }}>Commands</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>Description</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>Status</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell component="th" scope="row" style={{ color: '#fff' }}>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>{row.description}</TableCell>
|
||||
<TableCell align="right" style={{ color: '#fff' }}>{row.status ? 'Online' : 'Offline'}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
} {!session && <>
|
||||
<h1>Seems like you're not logged in. Log in to get started!</h1>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Commands
|
||||
|
|
|
@ -40,6 +40,7 @@ a {
|
|||
}
|
||||
|
||||
.grid {
|
||||
margin: 50px;
|
||||
margin-top: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 350px);
|
||||
|
|
Loading…
Reference in a new issue