master
mahdi 3 years ago
parent 4a5e471df0
commit a9f5cf3410
  1. 4
      src/App.js
  2. 17
      src/components/Blogs/design1/BlogDesign1.js

@ -21,8 +21,8 @@ function App() {
{/* <BookDesign /> */} {/* <BookDesign /> */}
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
{/* <BlogDesign1 /> */} <BlogDesign1 />
{/* <BlogDesign2 /> */} {/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */} {/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */} {/* <BlogDesign4 /> */}

@ -8,7 +8,6 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => { const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return ( return (
<section className="w-4/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"> <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">
طراحی بلاگ 1 طراحی بلاگ 1
@ -24,24 +23,24 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</div> </div>
{/* blog UI Design1 */} {/* blog UI Design1 */}
<div className="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="bg-blue-400">
<img src={blogImage} alt="" className="w-full" /> <img src={blogImage} alt="" className="w-96" />
</div> </div>
<div className="w-8/12 mr-4"> <div className="mr-4">
<h2 className="text-base text-justify text-grayTextColor"> <h2 className="text-sm text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (
<p className="text-justify text-sm leading-6 my-3 text-grayTextColor"> <p className="text-justify text-xs leading-6 my-1 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند. دیگران متوجه شوند.
</p> </p>
)} )}
<div className="flex item-center justify-between w-full mt-4"> <div className="flex item-center justify-between w-full mt-2">
{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-6 h-6" />
<p className="text-xs text-lightGrayTextColor mr-2 font-light"> <p className="text-xs text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
@ -52,7 +51,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<p className="text-xs text-lightGrayTextColor ml-2 font-light"> <p className="text-xs text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" className="w-7 h-7" /> <img src={commentIcon} alt="" className="w-6 h-6" />
</div> </div>
)} )}
</div> </div>

Loading…
Cancel
Save