1
0
mirror of https://github.com/tormachris/cf-workers-status-page.git synced 2025-09-21 16:35:15 +02:00

refactor: switch css framework to tailwind

This commit is contained in:
Alex
2020-11-20 17:05:13 +01:00
parent 42f422c455
commit fb134bbf74
20 changed files with 1997 additions and 416 deletions

View File

@ -1,18 +1,25 @@
import config from '../../config.yaml'
const classes = {
gray: 'bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
green: 'bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-200',
yellow:
'bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200',
}
export default function MonitorStatusLabel({ kvMonitor }) {
let labelColor = 'grey'
let labelText = 'No data'
let color = 'gray'
let text = 'No data'
if (typeof kvMonitor !== 'undefined') {
if (kvMonitor.operational) {
labelColor = 'green'
labelText = config.settings.monitorLabelOperational
color = 'green'
text = config.settings.monitorLabelOperational
} else {
labelColor = 'orange'
labelText = config.settings.monitorLabelNotOperational
color = 'yellow'
text = config.settings.monitorLabelNotOperational
}
}
return <div className={`ui ${labelColor} horizontal label`}>{labelText}</div>
return <div className={`pill leading-5 ${classes[color]}`}>{text}</div>
}