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">
<ProductDesign />
<VodProductDesign />
<BookDesign />
<ButtonDesign />
<ProductTags />
<CounterDesign />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
<HeaderDesign1 />
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
</div>
);
}

@ -5,7 +5,13 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
const BlogDesign3 = ({
blogSubTitle,
blogAuthor,
blogComments,
blogTitleColor,
blogCommentAuthorTextColor,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
@ -36,11 +42,11 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
>
{/* <img src={blogFeaturedImage2} alt="" /> */}
<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>
{blogSubTitle && (
<h2 className="text-base text-justify text-productTitle mt-2">
<h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
نظر شما چیه
</h2>
)}
@ -48,14 +54,18 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
{blogAuthor && (
<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
className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
>
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<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 دقیقه
</p>
<img src={commentIcon} alt="" className="w-7 h-7" />
@ -70,7 +80,15 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
export default BlogDesign3;
//different text colors i used:
// text-darkBlueTextColor2
// text-productTitle
// text-lightGrayTextColor
BlogDesign3.defaultProps = {
blogTitleColor: "text-darkBlueTextColor2",
blogCommentAuthorTextColor: "text-darkBlueTextColor2",
blogSubTitle: true,
blogAuthor: 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">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-productTitle">
inside vodProductDesign component
</h2>
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
</div>
<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>
{/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around">

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

Loading…
Cancel
Save