better comparison + fixed navbar

This commit is contained in:
Nicholas Orlowsky 2023-01-23 14:37:22 -06:00
parent 9c601aa3be
commit d764fd29e1
6 changed files with 191 additions and 54 deletions

View file

@ -6,6 +6,8 @@ import React, {useEffect, useState} from "react";
import {Incident, UptimeResponse} from "../nws-api/types";
import {getIncidents, getUptime} from "../nws-api/calls";
import "../App.css";
import UptimeComparisonCard from "./UptimeComparisonCard";
import UptimeLabelCard from "./UptimeLabelCard";
export default function HomePage() {
@ -30,7 +32,6 @@ export default function HomePage() {
return(
<div className="App">
<div className={"w-100 row"}>
<div className={"col-md-6 d-flex justify-content-center flex-column align-items-center"}>
<img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
@ -45,7 +46,10 @@ export default function HomePage() {
</p>
</div>
</div>
<div className={"w-100 mt-2 flex justify-content-center align-content-center text-center"}>
<h3><i>Better uptime than GitHub Pages!</i></h3>
<h4><a href={"https://youtu.be/WHdXWMFHuqA"} target="_blank" rel="noopener noreferrer">Watch the NWS Deployment Demo</a></h4>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
@ -53,10 +57,11 @@ export default function HomePage() {
<div className={"text-left row"} style={{width: '75vw'}}>
<h2>Compare us to our competitors</h2>
<p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
<div className={"col-12 row w-100 m-0"}>
<div className={"col-12 row w-100 m-0 align-content-center d-flex justify-content-center pt-2"}>
<UptimeLabelCard/>
{uptime.competitors.sort((a,b)=>{return b.uptimeMonth === a.uptimeMonth ? (a.name === "NWS" ? -1000 : b.name.localeCompare(a.name)) : b.uptimeMonth - a.uptimeMonth}).map((e) => {
return (
<UptimeCard uptime={e} isService={false}/>
<UptimeComparisonCard uptime={e} isService={false}/>
);
})}
</div>