Added some margin to home page card grid

This commit is contained in:
qt-coder 2021-06-25 08:07:36 +08:00
parent 5eafb64efd
commit c857c40fbd
3 changed files with 74 additions and 73 deletions

View file

@ -4,7 +4,7 @@ import Link from 'next/link'
const useStyles = makeStyles({
homeCard: {
width: '350px',
width: '300px',
height: '150px',
background: '#1f1b24',
margin: '10px',

View file

@ -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&apos;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&apos;re not logged in. Log in to get started!</h1>
</>
}
</>
);
}
export default Commands

View file

@ -40,6 +40,7 @@ a {
}
.grid {
margin: 50px;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(auto-fill, 350px);