GA-lightAutomation · kimitaWanjohi · Aug 14, 2022 · Aug 14, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-md-editor": "^3.17.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/App.js b/src/App.js
@@ -9,11 +9,12 @@ import Docs from "./components/Pages/Docs";
 import Navbar from "./components/Navbar/Navbar";
 import {ThemeProvider} from "@mui/material";
 import {appTheme}  from "./Theme/theme";
-import Blogs from "./components/Pages/Blogs";
+import Blogs from "./components/Pages/Blogs/Blogs";
 import Light from "./components/Pages/Light";
 import Login from "./components/Pages/Login"; 
 import Lightproject from './components/Pages/Lightproject'; 
 import Doorproject from './components/Pages/Doorproject';
+import CreateBlog from "./components/Pages/Blogs/CreateBlog";
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
           <Route path={"/"} element={<Home />} />
           <Route path={"/docs"} element={<Docs />} />
           <Route path={"/blogs"} element={<Blogs />} />
+          <Route path={"blogs/new"} element={<CreateBlog />} />
           <Route path={"/light"} element={<Light />} />
           <Route path={"/login"} element={<Login />} />
           <Route path={"/lightproject"} element={<Lightproject/>} />

diff --git a/src/components/Pages/Blogs.jsx → src/components/Pages/Blogs/Blogs.jsx b/src/components/Pages/Blogs.jsx → src/components/Pages/Blogs/Blogs.jsx
@@ -2,9 +2,13 @@ import React from 'react';
 import {
     Container,
     Paper,
-    Typography
+    Typography,
+    Fab
 } from "@mui/material";
-import BlogCard from'../BlogCard/BlogCard';
+import BlogCard from '../../BlogCard/BlogCard';
+import AddIcon from "@mui/icons-material/Add";
+import {useNavigate, useLocation} from "react-router-dom";
+
 
 const blogs = [
     {
@@ -28,12 +32,14 @@ const blogs = [
 ]
 
 export default function Blogs(){
+    const navigate = useNavigate();
+    const location = useLocation();
+
     return (
-        <Container maxWidth={"xl"} component={Paper} sx={theme => ({
-            background: theme.palette.background
-        })}>
+        <Container maxWidth={"xl"}>
             <Typography variant={"h4"}
                         align={"center"}
+                        color={"text.primary"}
                         gutterBottom
             >
                 Blogs
@@ -43,6 +49,23 @@ export default function Blogs(){
                     <BlogCard title={blog.title} body={blog.body} author={blog.author} date={blog.date} />
                 ))
             }
+            <Fab
+                variant={"extended"}
+                color={"primary"} aria-label={"add"}
+                sx={{
+                    position: "sticky",
+                    bottom: "10%",
+                    float: "right",
+                    color: "white",
+                    margin: "12px"
+                }}
+                onClick={() => navigate(`${location.pathname}/new`)}
+            >
+                <AddIcon sx={{ mr: {xs: 0, md: 1} }}/>
+                <Typography sx={{display: {xs: "none", md: "block"}}}>
+                    New Blog
+                </Typography>
+            </Fab>
         </Container>
     )
 }
diff --git a/src/components/Pages/Blogs/CreateBlog.jsx b/src/components/Pages/Blogs/CreateBlog.jsx
@@ -0,0 +1,122 @@
+import React, {useState} from 'react';
+import Container from '@mui/material/Container';
+import Paper from "@mui/material/Paper";
+import MDEditor from "@uiw/react-md-editor";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid"
+import {styled} from "@mui/material/styles";
+import {ButtonGroup, InputBase} from "@mui/material";
+
+const mkdStr = `
+# Markdown Editor
+
+---
+
+**Hello world!!!**
+
+[![](https://avatars.githubusercontent.com/u/1680273?s=80&v=4)](https://avatars.githubusercontent.com/u/1680273?v=4)
+
+\`\`\`javascript
+import React from "react";
+import ReactDOM from "react-dom";
+import MEDitor from '@uiw/react-md-editor';
+
+\`\`\`
+`;
+
+const ContStyling = {
+    padding: "12px",
+}
+
+const BlogCover = styled("div")(({theme}) => ({
+    margin: "12px auto 0px auto",
+    padding: "12px"
+}))
+
+export default function CreateBlog() {
+    const [title, setTitle] = useState('')
+    const [blog, setBlog] = useState(mkdStr);
+    const [coverImg, setCoverImg] = useState(null);
+
+    const imageChange = (event) => {
+        if(event.target.files && event.target.files[0]){
+            setCoverImg(URL.createObjectURL(event.target.files[0]))
+        }
+    }
+
+    const saveDraft = () => {
+
+    }
+
+    const publish = () => {
+
+    }
+
+    return(
+        <Container maxWidth={"xl"} sx={ContStyling}>
+            <Paper>
+                <BlogCover>
+                    {coverImg? (
+                        <div style={ContStyling}>
+                            <img src={coverImg} alt={"cover"} width={"100%"} style={{
+                                maxHeight: "20vh"
+                            }}/>
+                            <Grid sx={{
+                                marginTop: "8px"
+                            }} container spacing={2}>
+                                <Grid item xs={12} md={6}>
+                                    <Button sx={{
+                                        width: "100%"
+                                        }} size={"small"} variant="contained" component="label">
+                                          Change Image
+                                      <input hidden accept="image/*" onChange={imageChange} type="file" />
+                                    </Button>
+                                </Grid>
+                                <Grid item xs={12} md={6}>
+                                    <Button sx={{
+                                        width: "100%"
+                                        }} size={"small"} variant="contained" color={"error"} component="label" onClick={() => setCoverImg('')}>
+                                          Remove Image
+                                    </Button>
+                                </Grid>
+                            </Grid>
+                        </div>
+                    ):(
+                        <Button size={"small"} variant="contained" component="label">
+                          Add A Cover Image
+                          <input hidden accept="image/*" onChange={imageChange} type="file" />
+                        </Button>
+                    )}
+                    <div style={{
+                        marginTop: "8px",
+                        padding: "4px"
+                        }}>
+                        <InputBase
+                            placeholder={"blog title"}
+                            onChange={(event => setTitle(event.target.value))}
+                            sx={{
+                            fontSize: "2rem",
+                            width: "100%",
+                            minHeight: "60px",
+                            maxHeight: "60px"
+                        }}/>
+                    </div>
+                </BlogCover>
+                <MDEditor height={"60vh"} value={blog} onChange={setBlog} />
+                <div style={ContStyling}>
+                    <Button
+                        size={"small"}
+                        variant={"outlined"}
+                        onClick={saveDraft}>
+                        save draft
+                    </Button>{"    "}
+                    <Button
+                        size={"small"}
+                        variant={"contained"}
+                        onClick={publish}
+                    > publish</Button>
+                </div>
+            </Paper>
+        </Container>
+    )
+}
diff --git a/src/components/Pages/Light.jsx b/src/components/Pages/Light.jsx
@@ -15,12 +15,7 @@ export default function Light() {
     const [on, setOn] = useState(false);
 
     return (
-        <Container maxWidth={"xl"} sx={theme => ({
-            background: theme.palette.background,
-            width: "100%",
-            minHeight: "100vh"
-        })} component={Paper}
-        >
+        <div>
             <div style={{
                 paddingTop: "12px"
             }}>
@@ -54,6 +49,6 @@ export default function Light() {
                 >Off</Button>
             </ButtonGroup>
             </div>
-        </Container>
+        </div>
     )
 }