master
mahdi 3 years ago
parent d4716a94c2
commit ced446378a
  1. 22
      src/App.js
  2. 28
      src/components/Blogs/design3/BlogDesign3.js
  3. 12
      src/components/vodProductDesign/VodProductDesign.js
  4. 1
      tailwind.config.js

@ -18,17 +18,17 @@ function App() {
<div className="App"> <div className="App">
<ProductDesign /> <ProductDesign />
<VodProductDesign /> <VodProductDesign />
<BookDesign /> {/* <BookDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags /> {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> {/* <BlogDesign2 /> */}
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> {/* <BlogDesign4 /> */}
<BlogDesign5 /> {/* <BlogDesign5 /> */}
<BlogDesign6 /> {/* <BlogDesign6 /> */}
<HeaderDesign1 /> {/* <HeaderDesign1 /> */}
</div> </div>
); );
} }

@ -5,7 +5,13 @@ 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 BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => { const BlogDesign3 = ({
blogSubTitle,
blogAuthor,
blogComments,
blogTitleColor,
blogCommentAuthorTextColor,
}) => {
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 */} {/* title holder */}
@ -36,11 +42,11 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
> >
{/* <img src={blogFeaturedImage2} alt="" /> */} {/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20"> <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2 className="text-base text-justify text-productTitle "> <h2 className={`text-base text-justify ${blogTitleColor}`}>
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-base text-justify text-productTitle mt-2"> <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
نظر شما چیه نظر شما چیه
</h2> </h2>
)} )}
@ -48,14 +54,18 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
{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 font-light mr-2"> <p
className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
>
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2"> <p
className={`text-xs font-light ml-2 ${blogCommentAuthorTextColor}`}
>
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" className="w-7 h-7" /> <img src={commentIcon} alt="" className="w-7 h-7" />
@ -70,7 +80,15 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
export default BlogDesign3; export default BlogDesign3;
//different text colors i used:
// text-darkBlueTextColor2
// text-productTitle
// text-lightGrayTextColor
BlogDesign3.defaultProps = { BlogDesign3.defaultProps = {
blogTitleColor: "text-darkBlueTextColor2",
blogCommentAuthorTextColor: "text-darkBlueTextColor2",
blogSubTitle: true, blogSubTitle: true,
blogAuthor: true, blogAuthor: true,
blogComments: true, blogComments: true,

@ -39,9 +39,15 @@ const VodProductDesign = ({
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-3/6 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-lg text-productTitle"> <h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
inside vodProductDesign component </div>
</h2> <div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
vodProductDesign
</span>
</p>
</div> </div>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <div className="flex flex-wrap sm:flex-nowrap justify-around">

@ -25,6 +25,7 @@ module.exports = {
lightPurpleTextColor: "#A680FF", lightPurpleTextColor: "#A680FF",
lightBlueTextColor: "#06BACE", lightBlueTextColor: "#06BACE",
darkBlueTextColor: "#0615CE", darkBlueTextColor: "#0615CE",
darkBlueTextColor2: "#235A90",
darkRedTextColor: "#CE3B06", darkRedTextColor: "#CE3B06",
darkCrimsonTextColor: "#05335F", darkCrimsonTextColor: "#05335F",
}), }),

Loading…
Cancel
Save