mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent d1fa38f047
commit 68ff810760
5 changed files with 60 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/App.js
  2. 10
      src/components/Blogs/design1/BlogDesign1.js
  3. 16
      src/components/Blogs/design4/BlogDesign4.js
  4. 22
      src/components/Blogs/design5/BlogDesign5.js
  5. 67
      src/components/Blogs/design6/BlogDesign6.js

4
src/App.js
Unescape View File

@ -19,9 +19,9 @@ function App() {
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
<BlogDesign1 />
{/* <BlogDesign1 /> */}
<BlogDesign2 />
<BlogDesign3 />
{/* <BlogDesign3 /> */}
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />

10
src/components/Blogs/design1/BlogDesign1.js
Unescape View File

@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -23,7 +23,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</p>
</div>
{/* blog UI Design1 */}
<div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
<div className="flex items-center justify-around py-2 px-4">
<div className="w-4/12">
<img src={blogImage} alt="" className="w-full" />
</div>
@ -38,9 +38,9 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
دیگران متوجه شوند.
</p>
)}
<div className=" flex item-center justify-between mt-5">
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب
@ -48,7 +48,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</div>
)}
{blogComments && (
<div className=" flex items-center">
<div className="flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه
</p>

16
src/components/Blogs/design4/BlogDesign4.js
Unescape View File

@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign4 = () => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-black bg-pink-200 p-2 rounded text-base">
@ -23,18 +23,18 @@ const BlogDesign4 = () => {
</p>
</div>
{/* blog UI Design4 */}
<div className="w-full md:w-2/6 flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
<div className="flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
<img
src={blogImage}
alt=""
className="h-full transform translate-x-1/3"
/>
<div className="w-full transform translate-x-10">
<h2 className="text-base md:text-xl text-grayTextColor">
<h2 className="text-base text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{/* {blogExcerpt && ( */}
<p className="text-sm md:text-base leading-6 my-3 text-grayTextColor">
<p className="text-sm text-justify leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
@ -43,18 +43,18 @@ const BlogDesign4 = () => {
<div className=" flex item-center justify-between mt-5">
{/* {blogAuthor && ( */}
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" />
<p className="text-xs text-lightGrayTextColor mr-2">
<img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
{/* // )} */}
{/* {blogComments && ( */}
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2">
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" />
<img src={commentIcon} alt="" className="w-7 h-7" />
</div>
{/* // )} */}
</div>

22
src/components/Blogs/design5/BlogDesign5.js
Unescape View File

@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<section className="w-4/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -23,37 +23,37 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</p>
</div>
{/* blog UI Design5 */}
<div className="w-full md:w-2/5 flex items-center justify-around p-6 rounded-md shadow-md ">
<div className="flex items-center justify-around p-6 rounded-md shadow-md bg-white">
<div className="w-4/12">
<img src={blogImage} alt="" className="w-full" />
</div>
<div className="w-8/12 mr-4">
<h2 className="text-base md:text-xl text-justify text-grayTextColor">
<h2 className="text-base text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
<p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className=" flex item-center justify-between mt-5">
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" />
<p className="text-xs text-lightGrayTextColor mr-2">
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2">
<div className="flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" />
<img src={commentIcon} alt="" className="w-7 h-7" />
</div>
)}
</div>

67
src/components/Blogs/design6/BlogDesign6.js
Unescape View File

@ -5,9 +5,9 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign6 = () => {
const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -24,40 +24,35 @@ const BlogDesign6 = () => {
</div>
{/* blog UI Design6 */}
<div className="">
<img
src={blogImage}
alt=""
className="w-full
"
/>
<img src={blogImage} alt="" className="w-full" />
<div className="py-2">
<h2 className="text-base md:text-xl text-justify text-grayTextColor">
<h2 className="text-base text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{/* {blogExcerpt && ( */}
<p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
{/* // )} */}
<div className=" flex item-center justify-between mt-5">
{/* {blogAuthor && ( */}
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" />
<p className="text-xs text-lightGrayTextColor mr-2">
حامد دژبانی نسب
</p>
</div>
{/* // )} */}
{/* {blogComments && ( */}
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" />
</div>
{/* // )} */}
{blogExcerpt && (
<p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-7 h-7" />
</div>
)}
</div>
</div>
</div>
@ -66,3 +61,9 @@ const BlogDesign6 = () => {
};
export default BlogDesign6;
BlogDesign6.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
};

Write Preview
Loading…
Cancel
Save