Style footer Job-counts.

This commit is contained in:
glax 2024-10-19 20:06:40 +02:00
parent 30f3903662
commit 09be1c64a3
2 changed files with 20 additions and 3 deletions

View File

@ -1,6 +1,8 @@
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import '../styles/footer.css'; import '../styles/footer.css';
import {Job} from './Job'; import {Job} from './Job';
import Icon from '@mdi/react';
import { mdiRun, mdiCounter, mdiEyeCheck } from '@mdi/js';
export default function Footer(){ export default function Footer(){
const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0); const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
@ -19,9 +21,9 @@ export default function Footer(){
return ( return (
<footer> <footer>
<p>{MonitoringJobsCount}</p> <div><Icon path={mdiEyeCheck} size={1} /> <span>{MonitoringJobsCount}</span></div>
<p>{AllJobsCount}</p> <div><Icon path={mdiRun} size={1} /> <span>{RunningJobsCount}</span></div>
<p>{RunningJobsCount}</p> <div><Icon path={mdiCounter} size={1} /> <span>{AllJobsCount}</span></div>
<p id="madeWith">Made with Blåhaj 🦈</p> <p id="madeWith">Made with Blåhaj 🦈</p>
</footer>) </footer>)
} }

View File

@ -19,3 +19,18 @@ footer {
margin-right: 20px; margin-right: 20px;
cursor: url("Website/media/blahaj.png"), grab; cursor: url("Website/media/blahaj.png"), grab;
} }
footer div {
margin: 0 10px;
display: flex;
align-items: center;
justify-items: center;
background-color: rgba(255,255,255, 0.3);
border-radius: 10px;
padding: 0 5px;
}
footer div > * {
margin: 0 2px;
padding: 3px 0;
}