Merge pull request #5 from Texki-developers/ProductView

Product view

src/App.js

@@ -1,6 +1,7 @@
 import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
 import Home from './Components/Home/Home';
 import Header from './Components/Headder/Header'
+import ViewBook from './Components/ViewBook/ViewBook'
 import AddIcon from './Components/AddIcon/AddIcon';
 
 function App() {
@@ -15,8 +16,8 @@ function App() {
         <Route path="/add-book">
           <h1>Add book</h1>
         </Route>
-        <Route path="book">
-          <h1>view book</h1>
+        <Route path="/book">
+          <ViewBook/>
         </Route>
       </Switch>
     </Router>

src/Components/ViewBook/CommentCard/CommentCard.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import './CommentCard.scss'
+import ThumbUpAltOutlinedIcon from '@material-ui/icons/ThumbUpAltOutlined';
+
+
+function CommentCard(props) {
+    return (
+      <div className="comment_container">
+        <div id="user_name">
+          <img
+            src={props.image}
+            alt=""
+          />
+          <p>{props.name}</p>
+        </div>
+        <p>
+          {props.comment}
+        </p>
+        <div id="like_container">
+            <div className="like_up">
+              <ThumbUpAltOutlinedIcon/><span>{props.like}</span>
+            </div>
+            <div className="like_down">
+              <ThumbUpAltOutlinedIcon/><span>{props.unlike}</span>
+            </div>
+        </div>
+        <hr />
+      </div>
+    );
+}
+
+
+export default CommentCard

src/Components/ViewBook/CommentCard/CommentCard.scss

@@ -0,0 +1,78 @@
+@import '../../Variables/variables';
+
+.comment_container{
+    width: 100%;
+    margin: 25px 0 0;
+
+    #user_name{
+        display: flex;
+        align-items: center;
+        font-family: $raleway;
+
+        img{
+            object-fit: contain;
+            width: 40px;
+            border-radius: 50%;
+        }
+
+        p{
+            font-size: 18px;
+            font-weight: 500;
+            margin: 0 15px;
+        }
+    }
+
+    p{
+        font-family: $montserrat;
+        font-size: 18px;
+        margin: 25px 0 25px;
+    }
+
+    #like_container{
+        display: flex;
+        margin: 0 0 25px;
+
+
+
+        .like_up,.like_down{
+            display: flex;
+            margin: 0 10px 0;
+            align-items: center;
+
+            span{
+                margin: 0 5px;
+            }
+        }
+
+    }
+}
+
+
+@media screen and (max-width:750px){
+    .comment_container{
+        width: 100%;
+        margin: 15px 0 0;
+        padding: 5px;
+
+        #user_name{    
+            img{
+                width: 30px;
+            }
+
+            p{
+                font-size: 12px;
+                font-weight: 300;
+                margin: 0 10px;
+            }
+        }
+
+        p{
+            font-size: 12px;
+            margin: 15px 0 15px;
+        }
+
+        #like_container{
+            margin: 0 0 15px;
+        }
+    } 
+}

src/Components/ViewBook/ViewBook.js

@@ -1,11 +1,98 @@
 import React from 'react'
+import './ViewBook.scss'
+import StarIcon from '@material-ui/icons/Star';
+import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import CommentCard from './CommentCard/CommentCard'
 
 const ViewBook = () => {
+
+  const comments = [
+    {
+      name:'Amshen Yesudas',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'5678',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+
+    },
+    {
+      name:'Mushin',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'1535',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+
+    },{
+      name:'Rishad',
+      image:'https://avatars.githubusercontent.com/u/65121810?v=4',
+      like:'9000',
+      unlike:'124',
+      comment:"Nick's been feeling the same, but he's got a lot on his mind - not least coming out to his dad, ajnd the fact that Charlie might have an eating disorder.",
+
+    }
+  ]
+
+
     return (
-        <div>
-
+      <div className="viewbook_container">
+        <div className="book_container">
+          <img
+            src="https://images-na.ssl-images-amazon.com/images/I/410llGwMZGL._SX328_BO1,204,203,200_.jpg"
+            alt=""
+          />
+          <div className="book_detail">
+            <h1>The Alchemist</h1>
+            <p>by Paulo Coelho's</p>
+            <div className="star_review">
+              <StarIcon />
+              <StarIcon />
+              <StarIcon />
+              <StarIcon />
+              <StarOutlineIcon />
+              <button>Rate the book</button>
+            </div>
+            <button>Get This Book</button>
+          </div>
+        </div>
+        <div className="book_description">
+          <p>
+            Paulo Coelho's enchanting novel has inspired a devoted following
+            around the world. This story, dazzling in its powerful simplicity
+            and soul-stirring wisdom, is about an Andalusian shepherd boy named
+            Santiago who travels from his homeland in Spain to the Egyptian
+            desert in search of a treasure buried near the Pyramids. Along the
+            way he meets a Gypsy woman, a man who calls himself king, and an
+            alchemist, all of whom point Santiago in the direction of his quest.
+            No one knows what the treasure is, or if Santiago will be able to
+            surmount the obstacles in his path.
+            But what starts out as a journey
+            to find worldly goods turns into a discovery of the treasure found
+            within. Lush, evocative, and deeply humane, the story of Santiago is
+            an eternal testament to the transforming power of our dreams and the
+            importance of listening to our hearts
+          </p>
+        </div>
+        <hr/>
+        <div className="book_review">
+            <h2>Reviews of this book</h2>
+            <div className="review_details">
+                <StarIcon />
+                <StarIcon />
+                <StarIcon />
+                <StarIcon />
+                <StarOutlineIcon />
+                <p>5/5 | Rating:4599 |Reviews:3683 </p>
+            </div>
+            <button>Write your Review</button>
         </div>
-    )
+        <hr/>
+        {
+          comments.map((d,i)=>(
+            <CommentCard {...d} key={i} />
+          ))
+        }
+      </div>
+    );
 }
 
 export default ViewBook;