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

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

@ -28,15 +28,6 @@ body {
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
.rmdp-container {

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

Loading…
Cancel
Save