Skip to content

Commit 76acd0f

Browse files
tayseataysea
committed
Improve responsive layout, routing
1 parent 5047e15 commit 76acd0f

File tree

6 files changed

+169
-152
lines changed

6 files changed

+169
-152
lines changed

‎sandbox/grommet-app/src/App.jsx

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,10 @@
11
import { useState } from 'react';
2-
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
2+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
33
import { Box, Button, Grommet, Image } from 'grommet';
44
import { tokensTheme } from './theme';
55
import { Moon, Sun } from 'grommet-icons';
6-
7-
const pages = import.meta.glob('./pages/**/*.jsx', { eager: true });
8-
9-
const routes = [];
10-
for (const path of Object.keys(pages)) {
11-
const fileName = path.match(/\.\/pages\/(.*)\.jsx$/)?.[1];
12-
if (!fileName) {
13-
continue;
14-
}
15-
16-
const normalizedPathName = fileName.includes('$')
17-
? fileName.replace('$', ':')
18-
: fileName.replace(/\/index/, '');
19-
20-
console.log(routes, normalizedPathName);
21-
routes.push({
22-
path: fileName === 'index' ? '/' : `/${normalizedPathName.toLowerCase()}`,
23-
// @ts-ignore
24-
Element: pages[path].default,
25-
// @ts-ignore
26-
loader: pages[path]?.loader | undefined,
27-
// @ts-ignore
28-
action: pages[path]?.action | undefined,
29-
// @ts-ignore
30-
ErrorBoundary: pages[path]?.ErrorBoundary,
31-
});
32-
}
33-
34-
const router = createBrowserRouter(
35-
routes.map(({ Element, ErrorBoundary, ...rest }) => ({
36-
...rest,
37-
// @ts-ignore
38-
element: <Element />,
39-
// @ts-ignore
40-
...(ErrorBoundary && { errorElement: <ErrorBoundary /> }),
41-
})),
42-
);
6+
import Sustainability from './pages/sustainability/index';
7+
import Home from './pages/index';
438

449
const App = () => {
4510
const [darkMode, setDarkMode] = useState(false);
@@ -69,7 +34,12 @@ const App = () => {
6934
onClick={() => setDarkMode(!darkMode)}
7035
/>
7136
</Box>
72-
<RouterProvider router={router} />
37+
<BrowserRouter>
38+
<Routes>
39+
<Route path="/" element={<Home />} />
40+
<Route path="/sustainability" element={<Sustainability />} />
41+
</Routes>
42+
</BrowserRouter>
7343
</Grommet>
7444
);
7545
};

‎sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// import { useContext } from 'react';
2+
import PropTypes from 'prop-types';
23
import {
34
Box,
45
Heading,
@@ -17,7 +18,6 @@ export const DashboardCard = ({
1718
title,
1819
subtitle,
1920
children,
20-
href,
2121
footer,
2222
...rest
2323
}) => {
@@ -52,3 +52,15 @@ export const DashboardCard = ({
5252
</Card>
5353
);
5454
};
55+
56+
DashboardCard.propTypes = {
57+
icon: PropTypes.element,
58+
level: PropTypes.number,
59+
title: PropTypes.string,
60+
subtitle: PropTypes.string,
61+
children: PropTypes.oneOfType([
62+
PropTypes.arrayOf(PropTypes.element),
63+
PropTypes.element,
64+
]),
65+
footer: PropTypes.element,
66+
};

‎sandbox/grommet-app/src/pages/SustainabilityOverview.jsx

Lines changed: 108 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import PropTypes from 'prop-types';
2+
import { Link } from 'react-router-dom';
23
import { Box, DataChart, Grid, Notification, Text } from 'grommet';
34
import { DashboardCard } from '../components';
45
import sustainability from '../mockData/sustainability.json';
@@ -24,106 +25,112 @@ SustainabilityMetric.propTypes = {
2425

2526
export const SustainabilityOverview = () => {
2627
return (
27-
<DashboardCard title="Sustainability overview" level={2}>
28-
<Grid columns={[['min-content', 'auto'], 'flex']} gap="medium">
29-
<>
30-
<SustainabilityMetric
31-
label="Carbon emissions"
32-
unit="MTCO2e"
33-
value={132000}
34-
/>
35-
<DataChart
36-
data={sustainability.sustainability.slice(0, 10)}
37-
series={['date', 'emissions']}
38-
chart={[
39-
{
40-
property: 'emissions',
41-
type: 'area',
42-
thickness: 'xsmall',
43-
color: 'graph-4',
44-
opacity: 'medium',
45-
},
46-
{
47-
property: 'emissions',
48-
type: 'line',
49-
thickness: 'xxsmall',
50-
color: 'graph-4',
51-
round: true,
52-
},
53-
]}
54-
axis={{
55-
x: false,
56-
y: false,
57-
}}
58-
size={{ height: 'xxsmall' }}
59-
/>
60-
</>
61-
<>
62-
<SustainabilityMetric
63-
label="Energy consumption"
64-
unit="kWh"
65-
value={325000}
66-
/>
67-
<DataChart
68-
data={sustainability.sustainability.slice(0, 10)}
69-
series={['date', 'energy']}
70-
chart={[
71-
{
72-
property: 'energy',
73-
type: 'area',
74-
thickness: 'xsmall',
75-
color: 'graph-0',
76-
opacity: 'medium',
77-
},
78-
{
79-
property: 'energy',
80-
type: 'line',
81-
thickness: 'xxsmall',
82-
color: 'graph-0',
83-
round: true,
84-
},
85-
]}
86-
axis={{
87-
x: false,
88-
y: false,
89-
}}
90-
size={{ height: 'xxsmall' }}
91-
/>
92-
</>
93-
<>
94-
<SustainabilityMetric label="Energy cost" unit="USD" value={48750} />
95-
<DataChart
96-
data={sustainability.sustainability.slice(0, 10)}
97-
series={['date', 'cost']}
98-
chart={[
99-
{
100-
property: 'cost',
101-
type: 'area',
102-
thickness: 'xsmall',
103-
color: 'graph-2',
104-
opacity: 'medium',
105-
},
106-
{
107-
property: 'cost',
108-
type: 'line',
109-
thickness: 'xxsmall',
110-
color: 'graph-2',
111-
round: true,
112-
},
113-
]}
114-
axis={{
115-
x: false,
116-
y: false,
117-
}}
118-
size={{ height: 'xxsmall' }}
119-
/>
120-
</>
121-
</Grid>
122-
<Notification
123-
status="warning"
124-
message="Your carbon emissions have increased by 83% in the past month."
125-
margin={{ top: 'medium' }}
126-
/>
127-
</DashboardCard>
28+
<Link to="/sustainability" style={{ textDecoration: 'none' }}>
29+
<DashboardCard title="Sustainability overview" level={2}>
30+
<Grid columns={[['min-content', 'auto'], 'flex']} gap="medium">
31+
<>
32+
<SustainabilityMetric
33+
label="Carbon emissions"
34+
unit="MTCO2e"
35+
value={132000}
36+
/>
37+
<DataChart
38+
data={sustainability.sustainability.slice(0, 10)}
39+
series={['date', 'emissions']}
40+
chart={[
41+
{
42+
property: 'emissions',
43+
type: 'area',
44+
thickness: 'xsmall',
45+
color: 'graph-4',
46+
opacity: 'medium',
47+
},
48+
{
49+
property: 'emissions',
50+
type: 'line',
51+
thickness: 'xxsmall',
52+
color: 'graph-4',
53+
round: true,
54+
},
55+
]}
56+
axis={{
57+
x: false,
58+
y: false,
59+
}}
60+
size={{ height: 'xxsmall' }}
61+
/>
62+
</>
63+
<>
64+
<SustainabilityMetric
65+
label="Energy consumption"
66+
unit="kWh"
67+
value={325000}
68+
/>
69+
<DataChart
70+
data={sustainability.sustainability.slice(0, 10)}
71+
series={['date', 'energy']}
72+
chart={[
73+
{
74+
property: 'energy',
75+
type: 'area',
76+
thickness: 'xsmall',
77+
color: 'graph-0',
78+
opacity: 'medium',
79+
},
80+
{
81+
property: 'energy',
82+
type: 'line',
83+
thickness: 'xxsmall',
84+
color: 'graph-0',
85+
round: true,
86+
},
87+
]}
88+
axis={{
89+
x: false,
90+
y: false,
91+
}}
92+
size={{ height: 'xxsmall' }}
93+
/>
94+
</>
95+
<>
96+
<SustainabilityMetric
97+
label="Energy cost"
98+
unit="USD"
99+
value={48750}
100+
/>
101+
<DataChart
102+
data={sustainability.sustainability.slice(0, 10)}
103+
series={['date', 'cost']}
104+
chart={[
105+
{
106+
property: 'cost',
107+
type: 'area',
108+
thickness: 'xsmall',
109+
color: 'graph-2',
110+
opacity: 'medium',
111+
},
112+
{
113+
property: 'cost',
114+
type: 'line',
115+
thickness: 'xxsmall',
116+
color: 'graph-2',
117+
round: true,
118+
},
119+
]}
120+
axis={{
121+
x: false,
122+
y: false,
123+
}}
124+
size={{ height: 'xxsmall' }}
125+
/>
126+
</>
127+
</Grid>
128+
<Notification
129+
status="warning"
130+
message="Your carbon emissions have increased by 83% in the past month."
131+
margin={{ top: 'medium' }}
132+
/>
133+
</DashboardCard>
134+
</Link>
128135
);
129136
};

‎sandbox/grommet-app/src/pages/index.jsx

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
import { Box, PageHeader, Page, PageContent, Button, Grid } from 'grommet';
1+
import { useContext } from 'react';
2+
import {
3+
Box,
4+
PageHeader,
5+
Page,
6+
PageContent,
7+
Button,
8+
Grid,
9+
ResponsiveContext,
10+
} from 'grommet';
211
import { Configure } from 'grommet-icons';
312
import { DashboardCard } from '../components';
413
import { Recommended } from './Recommended';
@@ -9,10 +18,18 @@ import { SustainabilityOverview } from './SustainabilityOverview';
918
import { Notifications } from './Notifications';
1019

1120
function Index() {
21+
const size = useContext(ResponsiveContext);
1222
return (
1323
<Page pad={{ bottom: 'large', top: 'medium' }}>
1424
<PageContent gap="medium">
15-
<Grid columns={['flex', 'medium']} gap="large">
25+
<Grid
26+
columns={
27+
['xlarge', 'large', 'medium'].includes(size)
28+
? ['flex', 'medium']
29+
: ['auto']
30+
}
31+
gap="large"
32+
>
1633
<Box gap="medium">
1734
<PageHeader
1835
title="Home"
@@ -26,12 +43,18 @@ function Index() {
2643
}
2744
pad="none"
2845
/>
29-
<Grid columns={['flex', 'flex']} gap="medium">
46+
<Grid
47+
columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
48+
gap="medium"
49+
>
3050
<MyServices />
3151
<SustainabilityOverview />
3252
</Grid>
3353
<Notifications />
34-
<Grid columns={['flex', 'flex']} gap="medium">
54+
<Grid
55+
columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
56+
gap="medium"
57+
>
3558
<DashboardCard title="Wireless clients" level={2} />
3659
<DashboardCard title="Device summary" level={2} />
3760
</Grid>

0 commit comments

Comments
 (0)