Innoreva · nitianayush20 · Mar 15, 2022 · Mar 15, 2022
diff --git a/blog/package-lock.json b/blog/package-lock.json
diff --git a/blog/package.json b/blog/package.json
@@ -3,15 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/material": "^5.4.2",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^5.5.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-parallax-tilt": "^1.6.0",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/blog/src/App.js b/blog/src/App.js
@@ -3,16 +3,36 @@ import './App.css';
 import Login from './components/Login';
 
 
-function App() {
-  return (
-    <div className=''>
+import React from 'react';
+import { Box } from '@material-ui/core';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+//components
 
-      <Login />
 
-    </div>
+ import Header from './components/header/Header';
+ import Home from './components/home/Home';
+ import DetailView from './components/details/DetailView';
+ import CreatePost from './components/create/CreatePost';
 
 
-  )
+function App() {
+  return (
+
+      <BrowserRouter>
+
+         <Header />
+        <Box style={{marginTop: 64}}>
+          <Routes>
+            <Route exact path='/' element={Home} />
+            <Route exact path='/details' element={DetailView} />
+            <Route exact path='/create' element={CreatePost} />
+
+          </Routes>
+        </Box> 
+      </BrowserRouter>
+
+  );
 }
 
-export default App;
+export default App;  
diff --git a/blog/src/components/ForgetPassword.jsx b/blog/src/components/ForgetPassword.jsx
@@ -2,6 +2,6 @@ import React from 'react'
 
 export default function ForgetPassword() {
   return (
-    <div>ForgetPassword</div>
+    <h1>ForgetPassword</h1>
   )
 }
diff --git a/blog/src/components/banner/Banner.jsx b/blog/src/components/banner/Banner.jsx
@@ -0,0 +1,38 @@
+
+import { makeStyles, Box, Typography } from '@material-ui/core';
+
+const useStyle = makeStyles({
+    image: {
+        width: '100%',
+        background: `url(${'https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg'}) center/55% repeat-x #000`,
+        height: '50vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& :first-child': {
+            fontSize: 70,
+            color: '#FFFFFF',
+            lineHeight: 1
+        },
+        '& :last-child': {
+            fontSize: 40,
+            background: '#FFFFFF',
+        }
+    }
+})
+
+const Banner = () => {
+    const classes = useStyle();
+   // const url = 'https://cdn.pixabay.com/photo/2017/10/10/21/47/laptop-2838921_960_720.jpg';
+    return (
+        <>
+            <Box className={classes.image}>
+                <Typography>BLOG</Typography>
+                <Typography>INNOREVA</Typography>
+            </Box>
+        </>
+    )
+}
+
+export default Banner;
diff --git a/blog/src/components/create/CreatePost.jsx b/blog/src/components/create/CreatePost.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Box, makeStyles, TextareaAutosize, Button, FormControl, InputBase } from '@material-ui/core';
+import { AddCircle as Add, CallEnd } from '@material-ui/icons';
+import { useHistory, useLocation } from 'react-router-dom';
+
+
+// makeStyles is used to handle CSS in material-UI
+const useStyle = makeStyles(theme => ({
+    container: {
+        margin: '50px 100px',
+        [theme.breakpoints.down('md')]: {
+            margin: 0
+        },
+    },
+    image: {
+        width: '100%',
+        height: '50vh',
+        objectFit: 'cover'
+    },
+    title: {
+        marginTop: 10,
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    textfield: {
+        flex: 1,
+        margin: '0 30px',
+        fontSize: 25
+    },
+    textarea: {
+        width: '100%',
+        border: 'none',
+        marginTop: 50,
+        fontSize: 18,
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+}));
+
+
+const CreatePost = () => {
+    const classes = useStyle();
+
+
+    const url =  'https://images.unsplash.com/photo-1543128639-4cb7e6eeef1b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGFwdG9wJTIwc2V0dXB8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80';
+
+    return (
+        <Box className={classes.container}>
+            <img src={url} alt="post" className={classes.image} />
+
+            <FormControl className={classes.title}>
+                <label htmlFor="fileInput">
+                    <Add className={classes.addIcon} fontSize="large" color="action" />
+                </label>
+                <input
+                    type="file"
+                    id="fileInput"
+                    style={{ display: "none" }}
+
+                />
+                <InputBase  name='title' placeholder="Title" className={classes.textfield} />
+                <Button  variant="contained" color="primary">Publish</Button>
+            </FormControl>
+
+            <TextareaAutosize
+                rowsMin={5}
+                placeholder="Tell your story..."
+                className={classes.textarea}
+                name='description'
+
+            />
+        </Box>
+    )
+}
+
+export default CreatePost;
diff --git a/blog/src/components/details/DetailView.jsx b/blog/src/components/details/DetailView.jsx
@@ -0,0 +1,71 @@
+
+import { Box, makeStyles, Typography, Grid } from '@material-ui/core';
+
+// makeStyles is used to handle CSS in material-UI
+const useStyle = makeStyles(theme => ({
+    container: {
+        margin: '50px 100px',
+        [theme.breakpoints.down('md')]: {
+            margin: 0
+        },
+    },
+    image: {
+        width: '100%',
+        height: '50vh',
+        objectFit: 'cover'
+    },
+    icons: {
+        float: 'right'
+    },
+    icon: {
+        margin: 5,
+        padding: 5,
+        border: '1px solid #878787',
+        borderRadius: 10
+    },
+    heading: {
+        fontSize: 38,
+        fontWeight: 600,
+        textAlign: 'center',
+        margin: '50px 0 10px 0'
+    },
+    author: {
+        color: '#878787',
+        display: 'flex',
+        margin: '20px 0',
+        [theme.breakpoints.down('sm')]: {
+            display: 'block'
+        },
+    },
+    link: {
+        textDecoration: 'none',
+        color: 'inherit'
+    }
+}));
+
+
+const DetailView = () => {
+    const classes = useStyle();
+    const url = 'https://images.unsplash.com/photo-1543128639-4cb7e6eeef1b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGFwdG9wJTIwc2V0dXB8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80';
+
+    return (
+        <Box className={classes.container}>
+            <img src={url} alt="post" className={classes.image} />
+
+
+            <Typography className={classes.heading}>Title of the blog</Typography>
+
+            <Box className={classes.author}> 
+
+                    <Typography>Author: <span style={{fontWeight: 600}}>INNOREVA</span></Typography>
+
+                    <Typography style={{marginLeft: 'auto'}}>28th Feb, 2022</Typography>
+            </Box>
+
+            <Typography className={classes.detail}>asd adsd sfdasf fdasf dsfgsd dsfg sdfs sdg sgd sdg sfg sgd fg sfgd</Typography>
+
+        </Box>
+    )
+}
+
+export default DetailView;
diff --git a/blog/src/components/header/Header.jsx b/blog/src/components/header/Header.jsx
@@ -0,0 +1,39 @@
+
+import { AppBar, Toolbar, Typography, makeStyles, Button } from '@material-ui/core'; 
+import { Link } from 'react-router-dom';
+
+
+
+// makeStyles is used to handle CSS in material-UI
+const useStyle = makeStyles({
+    component: {
+        background: '#FFFFFF',
+        color: 'black'
+    },
+    container: {
+        justifyContent: 'center',
+        '&  >*': {
+            padding: '20',
+            color: 'black',
+            textDecoration: 'none'
+        }
+    }
+})
+
+const Header = () => {
+    const classes = useStyle();
+
+    return (
+        // AppBar acts as navBar
+        <AppBar className={classes.component}>
+            <Toolbar className={classes.container}>
+                <Link to='/'>HOME</Link>
+                <Link to='/about'>ABOUT</Link>
+                <Link to='/contact'>CONTACT</Link>
+                <Link>Login</Link>
+            </Toolbar>
+        </AppBar>
+    )
+}
+
+export default Header;
diff --git a/blog/src/components/home/Catagories.jsx b/blog/src/components/home/Catagories.jsx
@@ -0,0 +1,60 @@
+
+import { Button, Table, TableHead, TableRow, TableCell, TableBody, makeStyles, Grid } from '@material-ui/core';
+import { Link, useLocation } from 'react-router-dom';
+
+import { categories } from '../../constants/data';
+
+const useStyle = makeStyles({
+    table: {
+        border: '1px solid rgba(224, 224, 224, 1)'
+    },
+    write: {
+        margin: 20,
+        width: '85%',
+        background: '#6495ED',
+        color: '#fff',
+        textDecoration: 'none'
+    },
+    link: {
+        textDecoration: 'none',
+        color: 'inherit'
+    }
+})
+
+const Categories = ({ match }) => {
+    const classes = useStyle();
+    const location = useLocation();
+    let params = new URLSearchParams(location.search);
+    return (
+        <>
+            <Link to= '/create' style={{ textDecoration: 'none' }}>
+                <Button variant="contained" className={classes.write}>Create Blog</Button>
+            </Link>
+
+            <Table className={classes.table}>
+                <TableHead>
+                    <TableCell>
+                        <Link to={"/"} className={classes.link}>
+                            All Categories
+                        </Link>
+                    </TableCell>
+                </TableHead>
+                <TableBody>
+                    {
+                        categories.map(category => (
+                            <TableRow>
+                                <TableCell>
+                                    <Link to={`/?category=${category}`} className={classes.link}>
+                                        {category}
+                                    </Link>
+                                </TableCell>
+                            </TableRow>
+                        ))
+                    }
+                </TableBody>
+            </Table>
+        </>
+    )
+}
+
+export default Categories;
diff --git a/blog/src/components/home/Home.jsx b/blog/src/components/home/Home.jsx
@@ -0,0 +1,26 @@
+
+import { Grid } from '@material-ui/core';
+
+//components
+import Banner from '../banner/Banner';
+import Categories from './Catagories';
+import Posts from './post/Posts';
+
+const Home = () => {
+
+    return (
+        <>
+            <Banner />
+            <Grid container>
+                <Grid item lg={2} xs={12} sm={2}>
+                    <Categories />
+                </Grid>
+                <Grid container item xs={12} sm={10} lg={10}>
+                    <Posts />
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+
+export default Home;