1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
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',
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',
};
function App() {
const [selectedMarket, setSelectedMarket] = useState('ISONE');
const location = useLocation();
return (
<MarketContext.Provider value={{ selectedMarket, setSelectedMarket }}>
<div>
<style>
{`
@media (max-width: 600px) {
.page-header-container {
flex-direction: column;
align-items: center;
}
.page-header-title {
font-size: 20px !important;
text-align: center;
}
.page-header-subtitle {
font-size: 14px !important;
text-align: center;
}
.market-select-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 10px;
}
.market-select {
width: 100% !important;
text-align: center;
}
}
`}
</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>
</MarketContext.Provider>
);
}
export default App;
|
