update src/components/Blogss/design1/index.js, src/index.scss and data.js

master
mahdi andalib 2 years ago
parent 8b9905ecbd
commit 47ae5e6676
  1. 78
      src/components/Blogss/design1/index.js
  2. 9
      src/index.scss
  3. 11
      src/redux/data.js

@ -1,62 +1,47 @@
import blogImage from "../assets/blog-featured-image.jpg";
import blogAuthorImg from "../assets/blog-author.png";
import commentIcon from "../assets/light-gray-comment-icon.svg";
const BlogDesign1 = ({ const BlogDesign1 = ({
blogTitle,
blogExcerpt, blogExcerpt,
blogAuthor, blogAuthor,
blogComments, blogComments,
commentNumBgColor, commentNum,
commentNumTextColor, featuredImage,
commentNumTopPosition, commentIcon,
commentNumRightPosition, commentClassname,
}) => { }) => {
return ( return (
<div className="w-fit flex items-strech justify-around p-4 bg-white"> <div className="w-fit flex items-strech justify-around p-4 bg-white">
<div className="w-fit"> <img src={featuredImage} alt="blogImage" className="shrink" />
<img
src="images/blog-featured-image.jpg"
alt="blogImage"
className="shrink"
/>
</div>
<div className="flex-1 flex flex-col justify-between mr-4 py-2"> <div className="flex-1 flex flex-col justify-between mr-4 py-2">
<div> <div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6"> <h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟ {blogTitle}
</h2> </h2>
)}
{blogExcerpt && ( {blogExcerpt && (
<p className="text-justify text-sm leading-6 my-1 text-[#646464] mt-3"> <p className="mt-4 text-justify text-sm text-[#646464] leading-6">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد {blogExcerpt}
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p> </p>
)} )}
</div> </div>
<div className="flex item-center justify-between w-full mt-2"> <div className="w-full flex item-center justify-between mt-2">
{blogAuthor && ( {blogAuthor && (
<div className="flex items-center"> <div className="flex items-center">
<img src="images/blog-author.png" alt="" className="w-8 h-8" /> <img src="images/blog-author.png" alt="author" className="w-8" />
<p className="text-sm text-lightGrayTextColor mr-2 font-light"> <p className="text-sm text-[#818181] mr-2 font-light">
حامد دژبانی نسب {blogAuthor}
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className="flex items-center"> <div className="flex items-center">
<p className="text-sm text-lightGrayTextColor ml-2 font-light"> <p className="text-sm text-[#818181] ml-2 font-light">
زمان مطالعه 30 دقیقه {blogComments}
</p> </p>
<div className="relative"> <div class="relative">
<img <img class="w-7 rounded-full" src={commentIcon} alt="" />
src="images/light-gray-comment-icon.svg" <span class="w-6 h-6 text-center flex flex-col items-center justify-center font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white border-2 border-white dark:border-gray-800 rounded-full">
alt="" {commentNum}
className="w-7 h-7"
/>
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span> </span>
</div> </div>
</div> </div>
@ -70,12 +55,17 @@ const BlogDesign1 = ({
export default BlogDesign1; export default BlogDesign1;
BlogDesign1.defaultProps = { BlogDesign1.defaultProps = {
blogExcerpt: true, blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogAuthor: true, blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
blogComments: true, شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
blogAuthor: `حامد دژبانی نسب`,
blogComments: `زمان مطالعه 30 دقیقه`,
commentNum: `26`,
featuredImage: "images/blog-featured-image.jpg",
commentIcon: "images/light-gray-comment-icon.svg",
commentNumBgColor: "bg-[#818181]", commentClassname: "bg-[#818181] text-white -top-2 -right-2",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
}; };

@ -28,15 +28,6 @@ body {
direction: ltr; direction: ltr;
} }
.comment-num {
font-size: 8px;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
border-radius: 50%;
}
// TODO Start FormInput Component // TODO Start FormInput Component
.rmdp-container { .rmdp-container {

@ -7,6 +7,7 @@ import Alert from "../components/Alert";
import Toast from "../components/Toast"; import Toast from "../components/Toast";
import Banners from "../components/Banners"; import Banners from "../components/Banners";
import Blogss from "../components/Blogss"; import Blogss from "../components/Blogss";
import CardTrelloDesign from "../components/CardTrelloDesign";
// import ButtonDesign from "./components/buttonDesign/ButtonDesign"; // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
// import ProductDesign from "./components/productDesign/ProductDesign"; // import ProductDesign from "./components/productDesign/ProductDesign";
@ -188,6 +189,16 @@ const components = [
code: null, code: null,
}, },
}, },
{
name: "Card",
author: "Andalib",
props: [],
content: {
name: "Card Designs",
component: <CardTrelloDesign />,
code: null,
},
},
]; ];
export default components; export default components;

Loading…
Cancel
Save