Home Explore Help
Sign In
Bappy1988
/
react-openttd-admin
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

mui

Ben Ward 11 months ago
parent
7cd27a63cc
commit
ad1403f790
5 changed files with 607 additions and 50 deletions
Unified View Show Diff Stats
  1. 2 2
      client/index.html
  2. 584 41
      client/package-lock.json
  3. 5 0
      client/package.json
  4. 12 7
      client/src/App.jsx
  5. 4 0
      client/src/main.jsx

+ 2 - 2
client/index.html
View File 

@@ -2,9 +2,9 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <link rel="icon" type="image/gif" href="/openttd-64.gif" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + React</title>
 
+    <title>OpenTTD Admin Panel</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="root"></div>
 
     <div id="root"></div>

File diff suppressed because it is too large
+ 584 - 41
client/package-lock.json


+ 5 - 0
client/package.json
View File 

@@ -10,6 +10,11 @@
 
     "preview": "vite preview"
 
     "preview": "vite preview"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
+    "@emotion/react": "^11.13.5",
 
+    "@emotion/styled": "^11.13.5",
 
+    "@fontsource/roboto": "^5.1.0",
 
+    "@mui/icons-material": "^6.1.10",
 
+    "@mui/material": "^6.1.10",
 
     "axios": "^1.7.9",
 
     "axios": "^1.7.9",
 
     "react": "^18.3.1",
 
     "react": "^18.3.1",
 
     "react-dom": "^18.3.1"
 
     "react-dom": "^18.3.1"

+ 12 - 7
client/src/App.jsx
View File 

@@ -1,6 +1,9 @@
 
 import { useState, useEffect } from 'react'
 
 import { useState, useEffect } from 'react'
 
 import axios from "axios";
 
 import axios from "axios";
 
 
 
+import { Container, Typography, Box } from '@mui/material';
 
+
 
+
 
 function App() {
 
 function App() {
 
 
 
   const [apiResponse, setApiResponse] = useState({});
 
   const [apiResponse, setApiResponse] = useState({});
 
@@ -15,15 +18,17 @@ function App() {
 
   }, []);
 
   }, []);
 
 
 
   return (
 
   return (
 
-    <>
 
-      <h1>OpenTTD Admin Console App</h1>
 
-      <div className="card">
 
-        <p>
 
+    <Container maxWidth="sm">
 
+      <Box sx={{my: 4}}>
 
+        <Typography variant='h2' component='h1' sx={{mb:2}}>
 
+          OpenTTD Admin Console App
 
+        </Typography>
 
+        <Typography>
 
           Data retrieved from BackEnd:
 
           Data retrieved from BackEnd:
 
-        </p>
 
+        </Typography>
 
         <pre>{JSON.stringify(apiResponse)}</pre>
 
         <pre>{JSON.stringify(apiResponse)}</pre>
 
-      </div>
 
-    </>
 
+      </Box>
 
+    </Container>
 
   )
 
   )
 
 }
 
 }

+ 4 - 0
client/src/main.jsx
View File 

@@ -1,6 +1,10 @@
 
 import { StrictMode } from 'react'
 
 import { StrictMode } from 'react'
 
 import { createRoot } from 'react-dom/client'
 
 import { createRoot } from 'react-dom/client'
 
 import App from './App.jsx'
 
 import App from './App.jsx'
 
+import '@fontsource/roboto/300.css';
 
+import '@fontsource/roboto/400.css';
 
+import '@fontsource/roboto/500.css';
 
+import '@fontsource/roboto/700.css';
 
 
 
 createRoot(document.getElementById('root')).render(
 
 createRoot(document.getElementById('root')).render(
 
   <StrictMode>
 
   <StrictMode>

Some files were not shown because too many files changed in this diff