30 lines
1.7 KiB
TypeScript
30 lines
1.7 KiB
TypeScript
import {UptimeRecord} from "../nws-api/types";
|
|
import React from "react";
|
|
import '../App.css';
|
|
|
|
export default function UptimeCard(props: {uptime: UptimeRecord}) {
|
|
return(
|
|
<div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
|
|
{props.uptime.url != null && <h3 className={"col-md-9 col-12"}><a href={props.uptime.url} style={{textDecoration: "none"}}>{props.uptime.name}</a></h3>}
|
|
{props.uptime.url == null && <h3 className={"col-md-9 col-12"}>{props.uptime.name}</h3>}
|
|
|
|
<div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
|
|
<p className={`fw-bold severity-label
|
|
${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
|
style={{width: "max-content"}}>
|
|
{props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
|
</p>
|
|
</div>
|
|
<div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
|
|
<p className={`fw-bold severity-label
|
|
${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
|
style={{width: "max-content"}}>
|
|
{props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
|
</p>
|
|
</div>
|
|
<p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {props.uptime.uptimeMonth}%</p>
|
|
<p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {props.uptime.uptimeAllTime}%</p>
|
|
</div>
|
|
);
|
|
}
|