nws/nws-site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add routing

Browse source
This commit is contained in:
Nicholas Orlowsky 2022-10-23 12:08:48 -05:00
parent 8456552f5a
commit b9e96ebf9c
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
7 changed files with 276 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.idea/workspace.xml
View file

@ -2,10 +2,13 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/components/IncidentCard.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/UptimeCard.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Footer.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/StatusPage.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -69,7 +72,7 @@
<workItem from="1648500425230" duration="246000" />
<workItem from="1658028513357" duration="2964000" />
<workItem from="1666469240565" duration="7361000" />
<workItem from="1666543043382" duration="439000" />
<workItem from="1666543043382" duration="1855000" />
</task>
<servers />
</component>

157
package-lock.json generated
View file

@ -16,9 +16,10 @@
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.0",
"react-tooltip": "^4.4.3",
"typescript": "^4.5.5",
@ -2774,9 +2775,9 @@
}
},
"node_modules/@react-aria/ssr": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
"integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
"integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
"dependencies": {
"@babel/runtime": "^7.6.2"
},
@ -2784,6 +2785,14 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
"integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -2796,9 +2805,9 @@
}
},
"node_modules/@restart/ui": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
"integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
"integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
@ -13070,12 +13079,11 @@
}
},
"node_modules/react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
@ -13244,16 +13252,15 @@
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "17.0.2"
"react": "^18.2.0"
}
},
"node_modules/react-error-overlay": {
@ -13279,6 +13286,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
"integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
"dependencies": {
"@remix-run/router": "1.0.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
"integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
"dependencies": {
"@remix-run/router": "1.0.2",
"react-router": "6.4.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@ -13376,9 +13413,9 @@
}
},
"node_modules/react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
@ -13863,12 +13900,11 @@
}
},
"node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"node_modules/schema-utils": {
@ -18074,13 +18110,18 @@
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
},
"@react-aria/ssr": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
"integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
"integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
"requires": {
"@babel/runtime": "^7.6.2"
}
},
"@remix-run/router": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
"integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ=="
},
"@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -18090,9 +18131,9 @@
}
},
"@restart/ui": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
"integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
"integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
"requires": {
"@babel/runtime": "^7.18.3",
"@popperjs/core": "^2.11.5",
@ -25460,12 +25501,11 @@
}
},
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"react-app-polyfill": {
@ -25587,13 +25627,12 @@
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
"scheduler": "^0.23.0"
}
},
"react-error-overlay": {
@ -25616,6 +25655,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
"integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
"requires": {
"@remix-run/router": "1.0.2"
}
},
"react-router-dom": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
"integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
"requires": {
"@remix-run/router": "1.0.2",
"react-router": "6.4.2"
}
},
"react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@ -25688,9 +25744,9 @@
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
@ -26020,12 +26076,11 @@
}
},
"scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"schema-utils": {

5
package.json
View file

@ -11,9 +11,10 @@
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.0",
"react-tooltip": "^4.4.3",
"typescript": "^4.5.5",

90
src/App.tsx
View file

@ -1,97 +1,15 @@
import React, {useEffect, useState} from 'react';
import NWSLogo from './static/images/NWS_Logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Incident, UptimeResponse} from "./nws-api/types";
import {getIncidents, getUptime} from "./nws-api/calls";
import ReactTooltip from 'react-tooltip';
import UptimeCard from "./components/UptimeCard";
import IncidentCard from "./components/IncidentCard";
import StatusPage from "./components/StatusPage";
import Footer from "./components/Footer";
import { BrowserRouter, Route, Outlet, Link } from "react-router-dom";
function App() {
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
const [incidents, setIncidents] = useState<Incident[]>([]);
const fetchUptime = async () => {
let resp: UptimeResponse = await getUptime();
setUptime(resp);
}
const fetchIncidents = async () => {
let resp: Incident[] = await getIncidents();
setIncidents(resp);
}
useEffect(() => {
fetchUptime();
fetchIncidents();
}, []);
// @ts-ignore
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%"}}/>
</div>
<div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
<h1>Nick Web Services</h1>
<p style={{ maxWidth: 500 }} className={"col-md-6 text-center"}>
Nick Web Services is a hosting service based out of
Austin, Texas. It is committed
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
services.
</p>
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div className={"text-left row"} style={{width: '75vw'}}>
<h2>NWS System Status</h2>
<p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
<div className={"col-md-6 col-12"}>
<h3>Service Status</h3>
{uptime.services.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
<div className={"col-md-6 col-12"}>
<h3>Datacenter Status</h3>
{uptime.datacenters.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div>
<h3>Service Alerts</h3>
{incidents.map((e) => {
return (
<IncidentCard incident={e}/>
);
})}
{incidents.length == 0 && <div className={`row text-center`} style={{width: '75vw'}}>
<h5 className={"col-12"}>No service alerts.</h5>
</div>}
</div>
<footer style={{margin: 25}}>
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
</footer>
</div>
<div/>
);
}

9
src/components/Footer.tsx Normal file
View file

@ -0,0 +1,9 @@
import React from "react";
export default function Footer() {
return (
<footer style={{margin: 25}}>
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
</footer>
);
}

93
src/components/StatusPage.tsx Normal file
View file

@ -0,0 +1,93 @@
import NWSLogo from "../static/images/NWS_Logo.png";
import UptimeCard from "./UptimeCard";
import IncidentCard from "./IncidentCard";
import Footer from "./Footer";
import React, {useEffect, useState} from "react";
import {Incident, UptimeResponse} from "../nws-api/types";
import {getIncidents, getUptime} from "../nws-api/calls";
import "../App.css";
export default function StatusPage() {
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services: [], lastUpdated: ""});
const [incidents, setIncidents] = useState<Incident[]>([]);
const fetchUptime = async () => {
let resp: UptimeResponse = await getUptime();
setUptime(resp);
}
const fetchIncidents = async () => {
let resp: Incident[] = await getIncidents();
setIncidents(resp);
}
useEffect(() => {
fetchUptime();
fetchIncidents();
}, []);
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%"}}/>
</div>
<div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
<h1>Nick Web Services</h1>
<p style={{maxWidth: 500}} className={"col-md-6 text-center"}>
Nick Web Services is a hosting service based out of
Austin, Texas. It is committed
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
services.
</p>
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div className={"text-left row"} style={{width: '75vw'}}>
<h2>NWS System Status</h2>
<p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
<div className={"col-md-6 col-12"}>
<h3>Service Status</h3>
{uptime.services.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
<div className={"col-md-6 col-12"}>
<h3>Datacenter Status</h3>
{uptime.datacenters.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div>
<h3>Service Alerts</h3>
{incidents.map((e) => {
return (
<IncidentCard incident={e}/>
);
})}
{incidents.length == 0 &&
<div className={`row text-center`} style={{width: '75vw'}}>
<h5 className={"col-12"}>No service alerts.</h5>
</div>
}
</div>
</div>
);
}

65
src/index.tsx
View file

@ -1,14 +1,59 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import StatusPage from "./components/StatusPage";
import reportWebVitals from "./reportWebVitals";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import UptimeCard from "./components/UptimeCard";
import Footer from "./components/Footer";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
function Layout (props: {children: any}) {
return (
<div>
{props.children}
<Footer/>
</div>
);
}
const router = createBrowserRouter([
{
path: "/",
element:
<Layout>
<StatusPage/>
</Layout>
},
{
path: "blog",
element:
<Layout>
<StatusPage/>
</Layout>
},
{
path: "blogs",
element:
<Layout>
<StatusPage/>
</Layout>
},
{
path: "*",
element:
<Layout>
<StatusPage/>
</Layout>
},
]);
// @ts-ignore
ReactDOM.createRoot(document.getElementById("root")).render(
<RouterProvider router={router} />
);
// If you want to start measuring performance in your app, pass a function