Created blog page

WikiPortal · Jan 21, 2024 · b80e093 · b80e093
1 parent 3342162
commit b80e093
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,6 @@
     "postcss": "^8.4.32",
     "prettier": "3.1.1",
     "tailwindcss": "^3.4.0",
-    "vite": "^5.0.8"
+    "vite": "^5.0.12"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import Navbar from "./constants/Navbar/Navbar";
 import Home from "./pages/Home/Home";
 import Login from "./pages/Authentication/Login";
 import Footer from "./constants/Footer/Footer"
+import Blog from "./pages/Blog/Blog";
 
 function App() {
   const isUserLoggedIn = !!localStorage.getItem("token");
@@ -22,7 +23,7 @@ function App() {
         {isUserLoggedIn && (
           <Route path="/sketchbook" element={<Sketchbook />} />
         )}
-
+         <Route path="/blog" element={<Blog />}/>
       </Routes>
       <Footer />
     </Router>

diff --git a/src/pages/Blog/Blog.jsx b/src/pages/Blog/Blog.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Grid, Card, CardContent, Typography, Box } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { FaArrowAltCircleRight } from "react-icons/fa";
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+export default function Blog() {
+
+    const dark = false;    
+  const cardStyle = {
+    backgroundColor: dark ? 'white' : 'black',
+    color: dark ? 'black' : 'white',
+    height: '100%',
+    maxWidth: '80%',
+  };
+    const items = [
+        {'id':1, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':2, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':3, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':4, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':5, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':6, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':7, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':8, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':9, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':10, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':11, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+        {'id':12, 'heading':'Heading', 'content':"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo nec orci efficitur dictum.", "link":"https://google.com"},
+    ];
+
+    return (
+        <div style={{ overflowY: 'auto', maxHeight: '500px', padding: '0' }}>
+            <Grid container spacing={3} style={{ margin: '0 auto', maxWidth: '100%', overflowX: 'hidden', padding: '0' }}>
+                {items.map((item) => (
+                    <Grid key={item.id} item xs={12} sm={6} md={4} style={{ margin: '0' }}>
+                        <Box style={{ height: '100%' }}>
+                            <Card style={cardStyle}>
+                                <CardContent>
+                                    <Typography variant='h4' paddingBottom={10}>{item.heading}</Typography>
+                                    <div style={{ borderTop: dark ? '2px solid black' : '2px solid white',  maxWidth:'70%' }}>
+                                        <Typography variant='p' padding={1} fontSize={10}>{item.content}</Typography>
+                                    </div>
+                                    <br />
+                                    <Link to={item.link} style={{ display: 'flex', alignItems: 'center', fontSize: '18px', whiteSpace: 'nowrap' }}>
+                                        <span style={{ paddingRight: '10px' }}>Learn more</span>
+                                        <FaArrowAltCircleRight />
+                                    </Link>
+                                </CardContent>
+                            </Card>
+                        </Box>
+                    </Grid>
+                ))}
+            </Grid>
+        </div>
+    );
+
+                }