complete blog details page

JaberHPranto · Sep 15, 2021 · 2037075 · 2037075
1 parent 82ae577
commit 2037075
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 7 deletions.
diff --git a/client/src/components/Blog/Blog.js b/client/src/components/Blog/Blog.js
@@ -39,7 +39,7 @@ function Blog() {
                             <h4>Discover Tags</h4>
                             <div className="blog-tag-div">
                                 {blogTags.map(tag => (
-                                    <div className="blog-tag">{tag}</div>
+                                    <div key={tag} className="blog-tag">{tag}</div>
                                 ))}
                             </div>
                         </div>

diff --git a/client/src/components/Blog/BlogCard.js b/client/src/components/Blog/BlogCard.js
@@ -10,8 +10,8 @@ function BlogCard() {
                 <Card.Img style={{ padding: '0.7rem' }} variant="top" src="https://images.unsplash.com/photo-1520121401995-928cd50d4e27?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" />
                 <Card.Body>
                     <Card.Title className="blog-card-title">How to plant</Card.Title>
-                    {tags.map(tag => (
-                        <Badge className="blog-card-badge">{tag}</Badge>
+                    {tags.map((tag,index) => (
+                        <Badge key={index} className="blog-card-badge">{tag}</Badge>
                     ))}
                     <Card.Text className="blog-card-desc">
                         Some quick example text to build on the card title and make up the bulk of

diff --git a/client/src/components/Blog/BlogCategory.js b/client/src/components/Blog/BlogCategory.js
@@ -11,7 +11,7 @@ const data = [{ id: "plant", label: "Plant" },
 
 const BlogCategory = () => {
   const [isOpen, setOpen] = useState(false);
-  const [items, setItem] = useState(data);
+  const [items] = useState(data);
   const [selectedItem, setSelectedItem] = useState(null);
 
   const toggleDropdown = () => setOpen(!isOpen);

diff --git a/client/src/components/Blog/BlogDetails.js b/client/src/components/Blog/BlogDetails.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Badge, Container } from 'react-bootstrap'
+import '../../styles/blog.css'
+
+function BlogDetails() {
+    const tags = ['plant','indoor','gardening']
+    return (
+        <Container className='blog-det-container'>
+            <img className="blog-det-image"
+                src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
+                alt="blog hero"
+            />
+            <h1 className='blog-det-title'>A Plant’s Journey Home </h1>
+            <div className='blog-det-info'>
+                <p>By <span className='info-span'>Jaber Hossain Pranto</span></p>
+                <p>Published in <span className='info-span'>Plant</span></p>
+                <p>19 September,2021</p>
+            </div>
+            <div className='blog-det-desc'>
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor distinctio veritatis sapiente, minima corrupti dolores necessitatibus suscipit accusantium dignissimos culpa cumque.
+                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.                
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor distinctio veritatis sapiente, minima corrupti dolores necessitatibus suscipit accusantium dignissimos culpa cumque.
+                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.
+
+            </div>
+            <div className="blog-det-tags">
+                {tags.map((tag, index) => (                      
+                    <Badge key={index} className="blog-card-badge blog-det-badge">{tag}</Badge>                        
+                    ))}
+            </div>
+            <div className='blog-card-icons blog-det-icons'>
+                <i className="far fa-thumbs-up blog-det-like" aria-hidden="true"><span>&nbsp;5</span></i>
+                <i className="far fa-comments blog-det-comments" aria-hidden="true"><span>&nbsp;4</span></i>
+            </div>
+
+        </Container>
+    )
+}
+
+export default BlogDetails
diff --git a/client/src/components/Blog/NewBlog.js b/client/src/components/Blog/NewBlog.js
@@ -5,9 +5,7 @@ import BlogDropdown from './BlogCategory'
 
 function NewBlog() {
     const history = useHistory()
-    function backToBlog() {
-        history.push("/blog")
-    }
+
     return (
         <div className="write">
             <img className="writeImage"

diff --git a/client/src/pages/MainPage.js b/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 BlogDetails from "../components/Blog/BlogDetails";
 import NewBlog from "../components/Blog/NewBlog";
 // E-Commerce Section
 import Footer from "../components/Ecommerce/Footer";
@@ -35,6 +36,7 @@ function MainPage() {
       <main>
       <Route path="/" exact component={LandingPage} />
         <Container>
+          {/* Ecommerce Routes */}
           <Route path="/market" exact component={HomeScreen}/>
           <Route path="/search/:keyword" component={HomeScreen} exact />
           <Route path="/search/:keyword/page/:pageNumber" component={HomeScreen} />
@@ -54,8 +56,10 @@ function MainPage() {
           <Route path="/placeorder" component={PlaceOrderScreen} />
           <Route path="/payment" component={PaymentScreen} />
         </Container>
+        {/* Blog Routes */}
         <Route path="/blog/new" component={NewBlog} />
         <Route path="/blog" exact component={Blog} />
+        <Route path="/blog/:id" exact component={BlogDetails} />
       </main>
         <Footer />
     </Router>

diff --git a/client/src/styles/blog.css b/client/src/styles/blog.css
@@ -184,3 +184,72 @@
   color: #333 !important;
   border: 1px solid #f3f4f6 !important;
 }
+
+/* -------- */
+/* Blog Details */
+.blog-det-container {
+  position: relative;
+}
+.blog-det-image {
+  width: 85vw;
+  height: 25rem;
+  border-radius: 10px;
+  object-fit: cover;
+}
+.blog-det-title {
+  font-family: "Nunito";
+  font-weight: bold;
+  font-size: 3.5rem !important;
+  margin-top: 1rem;
+  /* text-align: center; */
+  color: #333;
+}
+.blog-det-info {
+  font-size: 1.5rem;
+  font-family: "Source Sans Pro";
+  display: flex;
+  margin-top: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(153, 153, 153, 0.728);
+}
+.blog-det-info > * {
+  margin-right: 1.3rem;
+}
+.info-span {
+  font-weight: bold;
+}
+.blog-det-desc {
+  font-size: 1.3rem;
+  font-family: "Poppins";
+  color: #555;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.blog-det-tags {
+  padding-top: 1rem;
+  border-top: 1px solid rgba(153, 153, 153, 0.728);
+}
+.blog-det-badge {
+  font-size: 1.2rem !important;
+  margin-right: 0.8rem;
+}
+.blog-det-icons {
+  position: absolute;
+  top: 28rem;
+  right: 0px;
+}
+.blog-det-like,
+.blog-det-comments {
+  font-size: 1.6rem;
+  background-color: #f3f4f6;
+  padding: 0.6rem 1.3rem;
+  border-radius: 20px;
+}
+.blog-det-like span,
+.blog-det-comments span {
+  font-family: "Nunito";
+  font-size: 1.4rem;
+}
+.blog-det-like {
+  margin-right: 1.1rem;
+}