From 887ec4af81dd56b798e360194299eea6b81d99ac Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Thu, 20 Jul 2023 00:31:36 +0300
Subject: feat: about page

Former-commit-id: 103850ab3128cf9042565a59b216cd2dac553682
---
 frontend/src/App.js                     |  3 ++-
 frontend/src/components/pages/about.css | 17 +++++++++++++++++
 frontend/src/components/pages/about.js  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/pages/about.css
 create mode 100644 frontend/src/components/pages/about.js

(limited to 'frontend/src')

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>
+    );
+};
-- 
cgit v1.2.3