blog home page completed

client/src/components/Blog/Blog.js

@@ -1,20 +1,29 @@
 import React from 'react'
-import { Col, Row } from 'react-bootstrap'
+import { Button, Col, Row } from 'react-bootstrap'
+import { useHistory } from 'react-router-dom'
 import '../../styles/blog.css'
 import BlogCard from './BlogCard'
+import { blogCategories, blogTags } from './BlogSeedData'
 
 function Blog() {
-    const blogCategories = ['All', 'Plant', 'Gardening', 'Green Living']
-    const num = [1,2,3,4,5]
+    const num = [1, 2, 3, 4, 5]
+    const history = useHistory()
+
+    function handleCreateBlog(){
+        history.push("/blog/new")
+    }
     return (
         <>
             <div className="blog-home">              
                 <div className="blog-home-img">
-                    <h1>Blogs</h1>
+                        <h1>Blogs</h1>
                     <p>We all need a little green in our lives</p>
                 </div>
                 <div className="blog-home-text">
-                    <h3>Latest Articles</h3>
+                    <div style={{ display:'flex',justifyContent:'space-between'}}>
+                        <h3>Latest Articles</h3>
+                        <Button onClick={handleCreateBlog} className="blog-btn bg-col-primary"><i className='fas fa-plus-circle'></i> &nbsp;Create Blog</Button>
+                    </div>
                     <p>Discover the most outstanding articles in all topics related to Plants</p>
                 </div>
 
@@ -23,9 +32,17 @@ function Blog() {
                         <div className='blog-category'>
                             <h5>Category</h5>
                             {blogCategories.map(blog => (
-                                <div key={blog}>{blog}</div>
+                                <div className='blog-category-item' key={blog}>{blog}</div>
                             ))}
                         </div>
+                        <div className="blog-tags">
+                            <h4>Discover Tags</h4>
+                            <div className="blog-tag-div">
+                                {blogTags.map(tag => (
+                                    <div className="blog-tag">{tag}</div>
+                                ))}
+                            </div>
+                        </div>
                     </Col>
                     <Col md={10} xs={12}>
                         <Row>

client/src/components/Blog/BlogSeedData.js

@@ -0,0 +1,4 @@
+export const blogCategories = ['All', 'Plant', 'Gardening', 'Plant Diseases', 'Green Living', 'Gardening Tools', 'Others']
+
+export const blogTags=["plants", "nature", "flowers", "plantsofinstagram", "garden",  "plantsmakepeoplehappy","plant", "green", "gardening", "houseplants", "photography",  "naturephotography","flower", "plantlover", "love", "indoorplants", "succulents", "urbanjungle", "cactus", "art", "beautiful", "plantlife", "photooftheday", "plantas", "plantstagram", "homedecor", "flowerstagram", "spring", "naturelovers", "bhfyp"]
+

client/src/components/Blog/NewBlog.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function NewBlog() {
+    return (
+        <div>
+            This is a new blog page
+        </div>
+    )
+}
+
+export default NewBlog

client/src/components/Ecommerce/Header.js

@@ -21,7 +21,7 @@ function Header() {
 
     return (
         <>
-            <Navbar collapseOnSelect expand="lg" variant="dark" className="bg-col-primary">
+            <Navbar collapseOnSelect expand="lg" variant="dark" className="bg-pm-col-only">
                 <Container>
                     <LinkContainer to="/market">
                         <Navbar.Brand>Plant Land</Navbar.Brand>

client/src/pages/MainPage.js

@@ -3,6 +3,7 @@ import { Container } from "react-bootstrap";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 // Blog Section
 import Blog from "../components/Blog/Blog";
+import NewBlog from "../components/Blog/NewBlog";
 // E-Commerce Section
 import Footer from "../components/Ecommerce/Footer";
 import Header from '../components/Ecommerce/Header';
@@ -53,8 +54,8 @@ function MainPage() {
           <Route path="/placeorder" component={PlaceOrderScreen} />
           <Route path="/payment" component={PaymentScreen} />
         </Container>
-        <Route path="/blog" component={Blog} />
-
+        <Route path="/blog/new" component={NewBlog} />
+        <Route path="/blog" exact component={Blog} />
       </main>
         <Footer />
     </Router>

client/src/styles/blog.css

@@ -1,3 +1,5 @@
+/* Blog Home Page */
+
 .blog-home {
   margin-top: -1.5rem;
 }
@@ -27,6 +29,7 @@
 .blog-home-text {
   margin-top: 2rem;
   margin-left: 1rem;
+  margin-bottom: 2rem !important;
 }
 .blog-home-text h3 {
   font-size: 2.1rem;
@@ -41,11 +44,38 @@
   margin-right: 0 !important;
 }
 .blog-category {
+  margin-bottom: 1.5rem;
+}
+.blog-category-item {
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.blog-category-item:hover {
+  color: #333;
 }
 .blog-category h5 {
-  font-size: 1.5rem;
+  font-size: 1.7rem;
+  padding-bottom: 0.8rem;
+  border-bottom: 2px solid rgba(51, 51, 51, 0.4);
+}
+.blog-tag-div {
+  display: flex;
+  flex-wrap: wrap;
+}
+.blog-tag {
+  background-color: #f3f4f6;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.7rem;
+}
+.blog-tags h4 {
+  margin-bottom: 1rem;
+}
+.blog-btn {
+  font-size: 1.2rem !important;
+  margin-right: 1rem !important;
 }
-
 /* Blog Card */
 .blog-card {
   margin-bottom: 2rem;
@@ -80,4 +110,6 @@
 .blog-card-icons > * {
   font-size: 1.3rem;
   color: var(--color-primary-1);
+  cursor: pointer;
 }
+/* --------- */

client/src/styles/index.css

@@ -27,11 +27,16 @@ code {
     monospace;
 }
 
+.bg-pm-col-only {
+  background-color: var(--color-primary-1);
+}
 .bg-col-primary {
   background-color: var(--color-primary-1);
-  /* background-color: #37ae5b; */
 }
-
+.bg-col-primary:hover {
+  background-color: #00c073 !important;
+  border: 1px solid #00c073;
+}
 .dropdown-item:hover {
   background-color: var(--color-primary-2);
 }