Skip to content

Commit 3c7d818

Browse files
studyhogstudyhog
committed
#17, #31 - (wip) drawer of contents added
1 parent 82a83a4 commit 3c7d818

File tree

12 files changed

+196
-402
lines changed

12 files changed

+196
-402
lines changed

‎package-lock.json

Lines changed: 58 additions & 328 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@testing-library/user-event": "^13.5.0",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
16+
"react-router-dom": "^6.3.0",
1617
"react-scripts": "5.0.1",
1718
"web-vitals": "^2.1.4"
1819
},

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="A collection of steam deck resources"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/Steam_Deck_favicon.svg" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎src/App.js

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "./App.css";
22
import {createTheme, ThemeProvider} from "@mui/material/styles";
3-
import Typography from "@mui/material/Typography";
4-
import {Page} from "./components/Page";
3+
import {Routes, Route} from "react-router-dom";
4+
import {Section} from "./components/Section";
55
import {Header} from "./components/Header";
66
import {EMULATION_RESOURCES} from "./data/emulation";
77
import {GUIDE_RESOURCES} from "./data/guide";
@@ -27,35 +27,66 @@ const ALL_RESOURCES = {
2727
"ROM": ROM_RESOURCES,
2828
"Valve": VALVE_RESOURCES,
2929
"Launchers": NON_STEAM_LAUNCHER_RESOURCES,
30-
"Game Performance/Reviews": GAME_REVIEW_RESOURCES,
30+
"GameReviews": GAME_REVIEW_RESOURCES,
3131
"Scripts": SCRIPT_RESOURCES,
3232
"Other": OTHER_RESOURCES,
3333
}
34+
const ALL_RESOURCES_SORTED = Object.fromEntries(
35+
Object.entries(ALL_RESOURCES).map(
36+
([title, resources]) => {
37+
return [title, resources.sort(resourceTitleComparator)];
38+
}
39+
)
40+
);
41+
42+
const Page = ({path, resources}) => {
43+
const my_resources = path === "" ? resources : {[path]: resources[path]}
44+
return <>
45+
{
46+
Object.entries(my_resources).map(
47+
([title, availableResources], i) => <Section
48+
key={`${title}-${i}-section`}
49+
sectionNum={i}
50+
title={title}
51+
resources={availableResources}
52+
/>
53+
)
54+
}
55+
</>;
56+
}
3457

3558
function App() {
59+
const resources = ALL_RESOURCES_SORTED;
60+
const resourceKeys = Object.keys(resources)
61+
const header = <Header
62+
title={"Steam Deck Resources"}
63+
links={resourceKeys}
64+
/>;
3665
return (
3766
<ThemeProvider theme={darkTheme}>
3867
<div className="App" style={{
3968
background: darkTheme.palette.background.default,
4069
}}>
41-
<Header title={"Steam Deck Resources"}/>
42-
{Object.entries(ALL_RESOURCES).map(([title, resources], i) => {
43-
const sortedResources = resources.sort(resourceTitleComparator);
44-
return <div key={`${title}-${i}-container-div`}>
45-
<Typography
46-
variant="h6"
47-
sx={{flexGrow: 1}}
48-
color={darkTheme.palette.text.primary}
49-
>
50-
{title}
51-
</Typography>
52-
<Page
53-
title={title}
54-
resources={sortedResources}
70+
{header}
71+
<Routes>
72+
<Route
73+
path="/"
74+
element={
75+
<Page path=""
76+
resources={resources}/>
77+
}
78+
/>
79+
{Object.keys(resources).map(
80+
(title, i) => <Route
81+
path={`/${title}`}
82+
key={`${title}-${i}-route`}
83+
element={
84+
<Page path={title}
85+
resources={resources}/>
86+
}
5587
/>
56-
<br/>
57-
</div>
58-
})}
88+
)}
89+
</Routes>
5990
</div>
6091
</ThemeProvider>
6192
);

‎src/components/Header.js

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
import {useState} from "react";
12
import Typography from "@mui/material/Typography";
2-
import {useTheme} from "@mui/material";
3+
import {Button, Drawer, useTheme} from "@mui/material";
34
import AppBar from '@mui/material/AppBar';
45
import Toolbar from '@mui/material/Toolbar';
5-
import Link from "@mui/material/Link";
6+
import {Link} from "react-router-dom";
67
import GitHubIcon from '@mui/icons-material/GitHub';
78

8-
export const Header = ({title}) => {
9+
10+
export const Header = ({title, links}) => {
911
const theme = useTheme();
12+
const [openDrawer, setOpenDrawer] = useState(false);
1013
const titleComponent = <Typography
1114
variant="h4"
1215
component="a"
@@ -16,14 +19,30 @@ export const Header = ({title}) => {
1619
href="/"
1720
>
1821
{title}
19-
</Typography>
22+
</Typography>;
23+
const linkComponents = links.map(
24+
(title, i) => <Link
25+
key={`${title}-${i}-header-link`}
26+
to={title}
27+
>{
28+
title}
29+
</Link>
30+
);
2031
return <AppBar position="static">
2132
<Toolbar>
2233
{titleComponent}
23-
<Link href="https://www.github.com/studyhog/deck"
24-
target="_blank">
25-
<GitHubIcon/>
26-
</Link>
34+
<Button onClick={()=>setOpenDrawer(true)}>Jump to</Button>
35+
<Drawer
36+
anchor={"right"}
37+
open={openDrawer}
38+
onClose={()=>setOpenDrawer(false)}
39+
>
40+
{linkComponents}
41+
<a href={"https://www.github.com/studyhog/deck" }
42+
target="_blank">
43+
<GitHubIcon/>
44+
</a>
45+
</Drawer>
2746
</Toolbar>
2847
</AppBar>
2948
}

‎src/components/Page.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/components/Section.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import TableContainer from '@mui/material/TableContainer';
2+
import Table from '@mui/material/Table';
3+
import TableHead from '@mui/material/TableHead';
4+
import TableRow from '@mui/material/TableRow';
5+
import TableCell from '@mui/material/TableCell';
6+
import TableBody from "@mui/material/TableBody";
7+
import {Row} from "./Row";
8+
import Typography from "@mui/material/Typography";
9+
import {useTheme} from "@mui/material";
10+
11+
export const Section = ({sectionNum, title, resources}) => {
12+
const theme = useTheme();
13+
const columns = ["Resource", "Watchers", "Forks", "Stars", "Description"];
14+
const tableRowKey = `${title}-TableRow`;
15+
return (
16+
<div key={`${title}-${sectionNum}-container-div`}>
17+
<Typography
18+
variant="h6"
19+
sx={{flexGrow: 1}}
20+
color={theme.palette.text.primary}
21+
>
22+
{title}
23+
</Typography>
24+
<TableContainer>
25+
<Table
26+
sx={{minWidth: 650}}
27+
size="small"
28+
>
29+
<TableHead
30+
key={`${title}-TableHead`}
31+
>
32+
<TableRow key={`${tableRowKey}-header`}>
33+
{columns.map(
34+
(c, i) => <TableCell key={`${tableRowKey}-header-${i}`}>{c}</TableCell>
35+
)}
36+
</TableRow>
37+
</TableHead>
38+
<TableBody>
39+
{resources.map((r, i) => {
40+
const currentRowKey = `${tableRowKey}-row-${i}`;
41+
const props = {rowKey: currentRowKey, ...r}
42+
return <Row
43+
key={currentRowKey}
44+
{...props}
45+
/>;
46+
})}
47+
</TableBody>
48+
</Table>
49+
</TableContainer>
50+
<br/>
51+
</div>
52+
)
53+
}

‎src/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
3+
import { BrowserRouter } from "react-router-dom";
34
import './index.css';
45
import App from './App';
56
import reportWebVitals from './reportWebVitals';
67

78
const root = ReactDOM.createRoot(document.getElementById('root'));
89
root.render(
910
<React.StrictMode>
10-
<App />
11+
<BrowserRouter>
12+
<App />
13+
</BrowserRouter>
1114
</React.StrictMode>
1215
);
1316

‎src/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)