better comparison + fixed navbar
This commit is contained in:
parent
9c601aa3be
commit
d764fd29e1
6 changed files with 191 additions and 54 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue