Merge pull request #336 from bounswe/feature/FE/316/home_page

Home Page & Game Page

ludos/frontend/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

ludos/frontend/src/App.js

@@ -1,21 +1,20 @@
-import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import HomePage from './pages/Homepage.js'
+import GamePage from './pages/GamePage.js'
+import React from 'react'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import './App.css';
+import Layout from './layout.js'
+
 
-import Layout from "./layout"; // Make sure to import your Layout component
-import LandingPage from "./pages/landingPage"; // Import your LandingPage component
 function App() {
   return (
     <Router>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <Layout>
-              <LandingPage />
-            </Layout>
-          }
-        />
-      </Routes>
+      <div className="App">
+        <Routes>
+          <Route path="/home" element={<Layout><HomePage/></Layout>} />
+          <Route path="/game" element={<Layout><GamePage/></Layout>} />
+        </Routes>
+      </div>
     </Router>
   );
 }

ludos/frontend/src/components/Post.js

@@ -0,0 +1,109 @@
+import React, { useEffect } from "react";
+import { Box, Typography, Button, Grid } from "@mui/material";
+import { FaArrowUp, FaArrowDown } from "react-icons/fa";
+
+function Post(data, key) {
+  const boxStyle = {
+    backgroundColor: "rgba(30, 30, 30, 0.9)",
+    borderRadius: "10px",
+    paddingTop: "15px",
+  };
+  const headerStyle = {
+    color: "white",
+    fontFamily: "Trebuchet MS, sans-serif",
+    marginBottom: "10px",
+  };
+  const forumStyle = { color: "rgb(0, 150, 255)" };
+  const followButton = {
+    backgroundColor: "rgb(255, 165, 0)",
+    color: "rgb(0, 0, 0)",
+    height: "20px",
+    textTransform: "none",
+  };
+  const descriptionStyle = { color: "white" };
+  const tagBox = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgb(0, 150, 255)",
+    color: "white",
+    height: "6px",
+    borderRadius: "10px",
+    padding: "5px",
+    marginRight: "5px",
+  };
+  const upVoteButton = {
+    backgroundColor: "rgb(124, 252, 0)",
+    marginRight: "5px",
+  };
+  const downVoteButton = { backgroundColor: "rgb(222, 49, 99)" };
+  useEffect(() => {}, []);
+
+  return (
+    <Grid item xs={12} sm={12} md={12} lg={12} key={key}>
+      <Box p={5} style={boxStyle}>
+        <Grid
+          item
+          xs={12}
+          sm={12}
+          md={12}
+          lg={12}
+          style={{ display: "flex", justifyContent: "space-between" }}
+        >
+          <Typography variant="caption" component="div" style={forumStyle}>
+            {data.post.forum}
+          </Typography>
+          <Grid style={{ display: "flex", justifyContent: "space-between" }}>
+            {data.post && data.post.tags.map((data1, index1) => (
+              <Typography
+                variant="caption"
+                component="div"
+                style={tagBox}
+                key={index1}
+              >
+                {data1}
+              </Typography>
+            ))}
+            <Button variant="contained" style={followButton}>
+              Follow
+            </Button>
+          </Grid>
+        </Grid>
+
+        <Typography
+          variant="h4"
+          component="div"
+          textAlign="left"
+          style={headerStyle}
+        >
+          {data.post.header}
+        </Typography>
+        <Typography
+          variant="body2"
+          color="textSecondary"
+          textAlign="left"
+          style={descriptionStyle}
+        >
+          {data.post.description}
+        </Typography>
+        <Grid
+          style={{
+            display: "flex",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            marginTop: "10px",
+          }}
+        >
+          <Button variant="contained" style={upVoteButton}>
+            <FaArrowUp style={{ color: "black" }} />
+          </Button>
+          <Button variant="contained" style={downVoteButton}>
+            <FaArrowDown />
+          </Button>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+}
+
+export default Post;