diff options
Diffstat (limited to 'client/src/App.js')
| -rw-r--r-- | client/src/App.js | 170 |
1 files changed, 103 insertions, 67 deletions
diff --git a/client/src/App.js b/client/src/App.js index c85e46c..0bd1dd4 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,33 +1,34 @@ -import React, { useState, createContext } from 'react'; -import { Routes, Route, Navigate, Link, useLocation } from 'react-router-dom'; -import { MarketDataPage, BidsPage, SubmitBidPage } from './components'; -import { Menu, Select, PageHeader, Typography } from '@arco-design/web-react'; -import '@arco-design/web-react/dist/css/arco.css'; +import React, { useState, createContext } from "react"; +import { Routes, Route, Navigate, Link, useLocation } from "react-router-dom"; +import { MarketDataPage, BidsPage, SubmitBidPage } from "./components"; +import { Menu, Select, PageHeader, Typography } from "@arco-design/web-react"; +import "@arco-design/web-react/dist/css/arco.css"; const ghostBgStyle = { - backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)', - backgroundSize: '16px 16px', + backgroundImage: + "radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)", + backgroundSize: "16px 16px", padding: 20, }; export const MarketContext = createContext(); export const MARKET_FULL_NAMES = { - CAISO: 'California ISO', - ERCOT: 'Electric Reliability Council of Texas', - ISONE: 'ISO New England', - MISO: 'Midcontinent ISO', - NYISO: 'New York ISO', - PJM: 'PJM Interconnection', + CAISO: "California ISO", + ERCOT: "Electric Reliability Council of Texas", + ISONE: "ISO New England", + MISO: "Midcontinent ISO", + NYISO: "New York ISO", + PJM: "PJM Interconnection", }; function App() { - const [selectedMarket, setSelectedMarket] = useState('ISONE'); + const [selectedMarket, setSelectedMarket] = useState("ISONE"); const location = useLocation(); return ( <MarketContext.Provider value={{ selectedMarket, setSelectedMarket }}> - <div> - <style> - {` + <div> + <style> + {` @media (max-width: 600px) { .page-header-container { flex-direction: column; @@ -53,57 +54,92 @@ function App() { } } `} - </style> - <div style={ghostBgStyle}> - <div className="page-header-container" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap' }}> - <div> - <PageHeader - title={ - <Typography.Title heading={3} className="page-header-title"> - PolyEnergy - </Typography.Title> - } - subTitle={ - <Typography.Title type="secondary" heading={4} className="page-header-subtitle"> - Virtual Energy Trading - </Typography.Title> - } - /> - </div> - <div className="market-select-container"> - <Select - className="market-select" - value={selectedMarket} - onChange={setSelectedMarket} - style={{ width: 200 }} - options={['ISONE', 'MISO', 'NYISO'].map(market => ({ label: market, value: market }))} - /> - </div> - </div> - <Menu mode="horizontal" selectedKeys={[location.pathname.split('/')[1] || 'market-data']}> - <Menu.Item key="market-data"> - <Link to="/market-data">Market Data</Link> - </Menu.Item> - <Menu.Item key="submit-bid"> - <Link to="/submit-bid">Submit Bid</Link> - </Menu.Item> - <Menu.Item key="bids"> - <Link to="/bids">My Bids</Link> - </Menu.Item> - </Menu> - </div> - <div style={{ backgroundColor: 'var(--color-fill-2)', minHeight: '80vh', display: 'flex', flexDirection: 'column' }}> - <Routes> - <Route path="/" element={<Navigate to="/market-data" replace />} /> - <Route path="/market-data" element={<MarketDataPage />} /> - <Route path="/submit-bid" element={<SubmitBidPage />} /> - <Route path="/bids" element={<BidsPage />} /> - </Routes> + </style> + <div style={ghostBgStyle}> + <div + className="page-header-container" + style={{ + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "flex-end", + flexWrap: "wrap", + }} + > + <div> + <PageHeader + title={ + <Typography.Title heading={3} className="page-header-title"> + PolyEnergy + </Typography.Title> + } + subTitle={ + <Typography.Title + type="secondary" + heading={4} + className="page-header-subtitle" + > + Virtual Energy Trading + </Typography.Title> + } + /> + </div> + <div className="market-select-container"> + <Select + className="market-select" + value={selectedMarket} + onChange={setSelectedMarket} + style={{ width: 200 }} + options={["ISONE", "MISO", "NYISO"].map((market) => ({ + label: market, + value: market, + }))} + /> + </div> + </div> + <Menu + mode="horizontal" + selectedKeys={[location.pathname.split("/")[1] || "market-data"]} + > + <Menu.Item key="market-data"> + <Link to="/market-data">Market Data</Link> + </Menu.Item> + <Menu.Item key="submit-bid"> + <Link to="/submit-bid">Submit Bid</Link> + </Menu.Item> + <Menu.Item key="bids"> + <Link to="/bids">My Bids</Link> + </Menu.Item> + </Menu> + </div> + <div + style={{ + backgroundColor: "var(--color-fill-2)", + minHeight: "80vh", + display: "flex", + flexDirection: "column", + }} + > + <Routes> + <Route path="/" element={<Navigate to="/market-data" replace />} /> + <Route path="/market-data" element={<MarketDataPage />} /> + <Route path="/submit-bid" element={<SubmitBidPage />} /> + <Route path="/bids" element={<BidsPage />} /> + </Routes> + </div> + <footer + style={{ + flexShrink: 0, + marginTop: 20, + textAlign: "center", + fontSize: 14, + color: "var(--color-text-3)", + paddingBottom: 20, + }} + > + © {new Date().getFullYear()} PolyEnergy. All rights reserved. + </footer> </div> - <footer style={{ flexShrink: 0, marginTop: 20, textAlign: 'center', fontSize: 14, color: 'var(--color-text-3)', paddingBottom: 20 }}> - © {new Date().getFullYear()} PolyEnergy. All rights reserved. - </footer> - </div> </MarketContext.Provider> ); } |