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
Unified 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. 39
      src/components/Blogs/design6/BlogDesign6.js

4
src/App.js
Unescape View File

@ -19,9 +19,9 @@ function App() {
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
{/* <CounterDesign /> */} {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> <BlogDesign2 />
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> <BlogDesign4 />
<BlogDesign5 /> <BlogDesign5 />
<BlogDesign6 /> <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 }) => { const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return ( 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 */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base"> <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -23,7 +23,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</p> </p>
</div> </div>
{/* blog UI Design1 */} {/* 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"> <div className="w-4/12">
<img src={blogImage} alt="" className="w-full" /> <img src={blogImage} alt="" className="w-full" />
</div> </div>
@ -38,9 +38,9 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
دیگران متوجه شوند. دیگران متوجه شوند.
</p> </p>
)} )}
<div className=" flex item-center justify-between mt-5"> <div className="flex item-center justify-between w-full mt-4">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2 font-light"> <p className="text-xs text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب حامد دژبانی نسب
@ -48,7 +48,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className="flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2 font-light"> <p className="text-xs text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </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 = () => { const BlogDesign4 = () => {
return ( 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 */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-black bg-pink-200 p-2 rounded text-base"> <h2 className="text-black bg-pink-200 p-2 rounded text-base">
@ -23,18 +23,18 @@ const BlogDesign4 = () => {
</p> </p>
</div> </div>
{/* blog UI Design4 */} {/* 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 <img
src={blogImage} src={blogImage}
alt="" alt=""
className="h-full transform translate-x-1/3" className="h-full transform translate-x-1/3"
/> />
<div className="w-full transform translate-x-10"> <div className="w-full transform translate-x-10">
<h2 className="text-base md:text-xl text-grayTextColor"> <h2 className="text-base text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{/* {blogExcerpt && ( */} {/* {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"> <div className=" flex item-center justify-between mt-5">
{/* {blogAuthor && ( */} {/* {blogAuthor && ( */}
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2"> <p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
{/* // )} */} {/* // )} */}
{/* {blogComments && ( */} {/* {blogComments && ( */}
<div className=" flex items-center"> <div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2"> <p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" /> <img src={commentIcon} alt="" className="w-7 h-7" />
</div> </div>
{/* // )} */} {/* // )} */}
</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 }) => { const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return ( 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 */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base"> <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -23,37 +23,37 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</p> </p>
</div> </div>
{/* blog UI Design5 */} {/* 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"> <div className="w-4/12">
<img src={blogImage} alt="" className="w-full" /> <img src={blogImage} alt="" className="w-full" />
</div> </div>
<div className="w-8/12 mr-4"> <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> </h2>
{blogExcerpt && ( {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> </p>
)} )}
<div className=" flex item-center justify-between mt-5"> <div className="flex item-center justify-between w-full mt-4">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className="flex items-center">
<img src={blogAuthorImg} alt="" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2"> <p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className="flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2"> <p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" /> <img src={commentIcon} alt="" className="w-7 h-7" />
</div> </div>
)} )}
</div> </div>

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

Write Preview
Loading…
Cancel
Save