feat: about page

Former-commit-id: 103850ab3128cf9042565a59b216cd2dac553682

3 files changed, 51 insertions, 1 deletions

diff --git a/frontend/src/App.js b/frontend/src/App.js
index c1745a7..d75636f 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -6,6 +6,7 @@ import Main from "./components/main.js"
 import "./App.css";

 

 import Summary from "./components/pages/summary.js"

+import About from './components/pages/about.js';

 

 

 export default function App() {

@@ -31,7 +32,7 @@ export default function App() {
             <Route path="/scorelog" element={<Main text="Score logs"/>}></Route>

             <Route path="/profile" element={<Main text="Profile"/>}></Route>

             <Route path="/rules" element={<Main text="Rules"/>}></Route>

-            <Route path="/about" element={<Main text="About"/>}></Route>

+            <Route path="/about" element={<About/>}></Route>

             <Route path="/maps/*" element={<Summary token={token} mod={mod}/>}></Route>

             <Route path="*" element={<Main text="404 Page not found"/>}></Route>

         </Routes>

diff --git a/frontend/src/components/pages/about.css b/frontend/src/components/pages/about.css
new file mode 100644
index 0000000..0dec300
--- /dev/null
+++ b/frontend/src/components/pages/about.css
@@ -0,0 +1,17 @@
+
+#about {
+    overflow: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    width: calc(100% - 380px); 
+    height: 100vh;
+    left: 350px;
+
+    padding-right: 30px;
+
+    font-size: 40px;
+    font-family: BarlowSemiCondensed-Regular;
+    color: #cdcfdf;
+
+}
diff --git a/frontend/src/components/pages/about.js b/frontend/src/components/pages/about.js
new file mode 100644
index 0000000..a265006
--- /dev/null
+++ b/frontend/src/components/pages/about.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import "./about.css";
+
+export default function About() {
+    const [aboutText, setAboutText] = useState('');
+
+    useEffect(() => {
+        const fetchReadme = async () => {
+            try {
+                const response = await fetch(
+                    'https://raw.githubusercontent.com/pektezol/LeastPortals/main/README.md'
+                );
+                if (!response.ok) {
+                    throw new Error('Failed to fetch README');
+                }
+                const readmeText = await response.text();
+                setAboutText(readmeText);
+            } catch (error) {
+                console.error('Error fetching README:', error);
+            }
+        };
+        fetchReadme();
+    }, []);
+
+    return (
+        <div id="about">
+            <ReactMarkdown>{aboutText}</ReactMarkdown>
+        </div>
+    );
+};