import "./App.css"; import clsx from "clsx"; import React from "react"; import { Helmet } from "react-helmet-async"; import { Header } from "@src/components/Header"; import { Switch, Route, Redirect } from "react-router-dom"; import { Home } from "../Home"; import { PriceCompare } from "../PriceCompare"; import { Faq } from "@src/routes/Faq"; import { makeStyles } from "@material-ui/core/styles"; import { Graph } from "../Graph"; import { useMediaQueryContext } from "@src/context/MediaQueryProvider"; import { Deploy } from "@src/routes/Deploy"; import { Footer } from "@src/components/Footer"; import { BetaBanner } from "@src/components/BetaBanner"; const useStyles = makeStyles((theme) => ({ appBody: { paddingTop: "2rem", paddingBottom: 80, minHeight: "calc(90vh - 80px)" }, appBodySmall: { paddingBottom: 50 } })); export function App() { const mediaQuery = useMediaQueryContext(); const classes = useStyles(); return ( <div> <Helmet defaultTitle="Akashlytics" titleTemplate="Akashlytics - %s" /> <Header /> <BetaBanner /> <div className={clsx(classes.appBody, { [classes.appBodySmall]: mediaQuery.smallScreen })}> <Switch> <Redirect from="/revenue/daily" to="/graph/daily-akt-spent" /> <Redirect from="/revenue/total" to="/graph/total-akt-spent" /> <Route path="/faq"> <Faq /> </Route> <Route path="/price-compare"> <PriceCompare /> </Route> <Route path="/graph/:snapshot"> <Graph /> </Route> <Route path="/deploy"> <Deploy /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> <Footer /> </div> ); }