Blogs Responsive and Content

src/containers/Blogs/Blog.module.css

@@ -16,8 +16,6 @@
   max-width: 1140px;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 .blogBoxInner {
   display: flex;
@@ -68,8 +66,6 @@
   min-width: 0;
   align-items: stretch;
   height: 100%;
-  flex-direction: row;
-  display: flex;
 }
 .innerContent {
   margin: 0;
@@ -87,6 +83,7 @@
   margin-bottom: 1rem;
 }
 .cardCategoryLink {
+  /* cursor: pointer; */
   font-size: 13px;
   padding: 0.15rem 1rem 0.25rem 1rem;
   border-radius: 0.5rem;
@@ -103,6 +100,7 @@
   border: 1px solid #718096;
 }
 .blogName {
+  cursor: pointer;
   display: block;
   color: #2d3748;
   font-weight: 700;
@@ -166,6 +164,7 @@
   box-sizing: border-box;
 }
 .categoryLinklist {
+  /* cursor: pointer; */
   display: inline-block;
   text-align: center;
   line-height: inherit;
@@ -323,9 +322,7 @@
   font-size: 24px;
   margin-top: auto;
 }
-.tendingBox {
-  padding: 10px;
-}
+
 .trendingInner {
   border-radius: 1rem;
   background-color: #fff;
@@ -337,16 +334,17 @@
 .leftImgBox {
   max-width: 296px;
   display: block;
+  cursor: pointer;
+  max-height: 300px;
 }
 .leftImg {
   max-width: 100%;
   display: block;
   position: static;
-  border-radius: 16px 0 0 16px;
 }
 .outerTrending {
   float: left;
-  width: 615px;
+  max-width: 615px;
 }
 .SingleBlogContent {
   color: #718096;

src/containers/Blogs/BlogCard.jsx

@@ -1,11 +1,16 @@
 import React from "react";
 import blogProfile from "assets/blogProfile.png";
-import blogLeftimg from "assets/blogLeftimg.jpg";
 import FacebookIcon from "@material-ui/icons/Facebook";
 import InstagramIcon from "@material-ui/icons/Instagram";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import style from "./Blog.module.css";
+import { useHistory, useParams } from "react-router";
+import { BlogData } from "./BlogData";
+import styled from "styled-components";
+import { getDeviceType } from "helpers";
+
 const BlogCard = (props) => {
+  const history = useHistory();
   return (
     <>
       <div className={style.blogBloxInner}>
@@ -14,11 +19,25 @@ const BlogCard = (props) => {
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
                 <div className={style.cardCategory}>
-                  <span className={style.cardCategoryLink}>
+                  <span
+                    className={style.cardCategoryLink}
+                    // onClick={() => {
+                    //   history.push(`/${props.Category}`);
+                    // }}
+                  >
                     {props.Category}
                   </span>
                 </div>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
                 <div className={style.blogContent}>{props.AboutBlog}</div>
                 <div className={style.profileBox}>
                   <div className={style.profileImg}>
@@ -45,10 +64,17 @@ const BlogCard = (props) => {
   );
 };
 const BlogListBox = (props) => {
+  // const history = useHistory();
+
   return (
     <>
       <div className={style.CategoryList}>
-        <span className={style.categoryLinklist}>
+        <span
+          className={style.categoryLinklist}
+          // onClick={() => {
+          //   history.push(`/blogs/${props.CategoryName}`);
+          // }}
+        >
           <div className={style.categoryLinkIcon}>{props.CategoryIcon}</div>
           <span className={style.categorylistName}>{props.CategoryName}</span>
         </span>
@@ -57,24 +83,50 @@ const BlogListBox = (props) => {
   );
 };
 const TrendingBlogBox = (props) => {
+  const history = useHistory();
+
   return (
     <>
       <div className={style.outerTrending}>
-        <div className={style.tendingBox}>
+        <TrendingBox>
           <div className={style.trendingInner}>
-            <article className={style.cardArticle}>
-              <span>
+            <Article className={style.cardArticle}>
+              <span
+                onClick={() => {
+                  history.push(
+                    `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                  );
+                }}
+              >
                 <div className={style.leftImgBox}>
-                  <img src={blogLeftimg} className={style.leftImg} alt="" />
+                  <Img
+                    src={props.blogLeftimg}
+                    className={style.leftImg}
+                    alt=""
+                  />
                 </div>
               </span>
               <div className={style.innerContent}>
                 <div className={style.cardCategory}>
-                  <span className={style.cardCategoryLink}>
+                  <span
+                    className={style.cardCategoryLink}
+                    // onClick={() => {
+                    //   history.push(`/blogs/${props.Category}`);
+                    // }}
+                  >
                     {props.Category}
                   </span>
                 </div>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
                 <div className={style.blogContent}>{props.AboutBlog}</div>
                 <div className={style.profileBox}>
                   <div className={style.profileImg}>
@@ -93,14 +145,18 @@ const TrendingBlogBox = (props) => {
                   </div>
                 </div>
               </div>
-            </article>
+            </Article>
           </div>
-        </div>
+        </TrendingBox>
       </div>
     </>
   );
 };
 const SingleBlogBox = (props) => {
+  const { blogId } = useParams();
+  const blogTemp = BlogData.filter(
+    (blog) => blog.blogId.toString() === blogId
+  )[0];
   return (
     <>
       <div className={style.blogBloxInner}>
@@ -109,37 +165,12 @@ const SingleBlogBox = (props) => {
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
                 <h2 className={style.SingleBlogHeading}>
-                  <span className={style.blogName}>
-                    What I’ll Be Wearing This Party Season & The Festive Edit
-                  </span>
+                  <span className={style.blogName}>{blogTemp.BlogHeading}</span>
                 </h2>
                 <div className={style.blogContent}>
-                  <p className={style.SingleBlogContent}>
-                    Lorem markdownum illic venturi instructa nobis Echidnae, cum
-                    quid magna fatebor. Levat placetque Phrygios annis micat
-                    carpat; sua iamque disparibus omnia Daedalion utinam et
-                    curvos nomine potentia. Retro fecit stridore ignarus spatium
-                    petit germanam; sive tergoque. Time sibi sit vulnere
-                    Iurantem vimque Alendi ad suspiria fores An nec tumulo
-                    fratres arcana Terris passos vix tenuavit petit Hostes
-                    iamque Amor tamen
-                  </p>
-
-                  <ol
-                    style={{
-                      paddingLeft: "17px",
-                      color: "#718096",
-                      fontSize: "18px",
-                      lineHeight: "31px",
-                    }}
-                  >
-                    <li>Time sibi sit vulnere </li>
-                    <li>Iurantem vimque</li>
-                    <li>Alendi ad suspiria fores </li>
-                    <li>An nec tumulo fratres arcana </li>
-                    <li>Terris passos vix tenuavit petit</li>
-                    <li>Hostes iamque Amor tamen</li>
-                  </ol>
+                  {blogTemp.FullBlog.map((data) => (
+                    <p className={style.SingleBlogContent}>{data}</p>
+                  ))}
                 </div>
                 <div className={style.SocialIcons}>
                   <ul className={style.Socialul}>
@@ -198,7 +229,7 @@ const SingleBlogRight = (props) => {
                   </div>
                   <div className={style.profileInfoBox}>
                     <div className={style.profileName}>
-                      <strong>Prateek</strong>
+                      <strong>Tamanna Verma</strong>
                     </div>
                     <div className={style.SocialIcons}>
                       <ul className={style.Socialul}>
@@ -242,14 +273,25 @@ const SingleBlogRight = (props) => {
   );
 };
 const RelatedPost = (props) => {
+  const history = useHistory();
+
   return (
     <>
       <div className={style.RelatedPostBox}>
         <div className={style.blogCard}>
           <div className={style.insideCard}>
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
 
                 <div className={style.profileInfoBox}>
                   <div className={style.profileName}>
@@ -274,3 +316,19 @@ export {
   SingleBlogRight,
   RelatedPost,
 };
+
+const Article = styled.div`
+  display: flex;
+  flex-direction: ${getDeviceType() === "mobile" ? "column" : "row"};
+`;
+
+const Img = styled.img`
+  height: ${getDeviceType() === "desktop" ? "max-content" : "250px"};
+  border-radius: ${getDeviceType() === "mobile"
+    ? "16px 16px 0 0"
+    : "16px 0 0 16px"};
+`;
+
+const TrendingBox = styled.div`
+  padding: ${getDeviceType() === "desktop" ? "10px" : "0"};
+`;