master
mahdi 3 years ago
parent 295d79d407
commit fbe55e815e
  1. 23
      src/components/productDesign/ProductDesign.js
  2. 103
      src/components/vodProductDesign/VodProductDesign.js
  3. 7
      src/components/vodProductDesign/VodProductDesign.scss

@ -37,6 +37,7 @@ const ProductDesign = ({
verticalImg,
horizontalImg,
rangeWidth,
addToCartHolder,
}) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -153,13 +154,13 @@ const ProductDesign = ({
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p
className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
@ -206,13 +207,15 @@ const ProductDesign = ({
</p>
</div>
{/* add to cart */}
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
{addToCartHolder && (
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)}
</div>
)}
{productTags && (
@ -275,6 +278,8 @@ ProductDesign.defaultProps = {
verticalImg: true,
horizontalImg: false,
addToCartHolder: true,
productTitleColor: "text-productTitle",
productExcerptTextColor: "text-productContent",

@ -3,6 +3,8 @@ import React from "react";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import "./VodProductDesign.scss";
import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
@ -31,11 +33,18 @@ const VodProductDesign = ({
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
productCatTextColor,
rangeHolder,
priceTitle,
productPriceAmountTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
}) => {
return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -57,9 +66,9 @@ const VodProductDesign = ({
<div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>
{/* img */}
{/* product image */}
<div
className="w-full relative flex items-center justify-center cursor-pointer"
className="parent-img w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
@ -67,6 +76,7 @@ const VodProductDesign = ({
minHeight: "180px",
}}
>
{/* icons on image */}
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2">
@ -87,7 +97,7 @@ const VodProductDesign = ({
)}
</div>
{/* play button */}
<div className="bg-playButtonIcon rounded-full p-4">
<div className="playBtnImg bg-playButtonIcon rounded-full p-4">
<img src={whitePlayIcon} alt="" className="w-5 h-5" />
</div>
{/* select Color */}
@ -124,34 +134,45 @@ const VodProductDesign = ({
</div>
)}
</div>
{/* product content */}
<div className="px-2">
{/* content */}
<div className="mt-4 flex justify-between items-center">
<h2
className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
<div className="mt-4 flex flex-col">
<div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
نسخه چاپی علموم تجربه هفتم
</h2>
<h2
className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && (
<span
className={`text-xs font-light ${productCatTextColor}`}
>
پایه سوم
</span>
)}
</div>
{productContent && (
<p className="text-justify text-productContent mt-2 text-xs leading-6">
<p
className={`text-justify text-xs leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</p>
)}
{productCat && (
<span className="text-darkCrimsonTextColor text-xs font-light">
پایه سوم
</span>
)}
</div>
{/* price */}
<div className="flex items-center justify-between mt-2">
<div
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
>
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div className="">
<div
className={`${
priceDirection.indexOf("col") !== -1
@ -179,7 +200,7 @@ const VodProductDesign = ({
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
@ -189,7 +210,7 @@ const VodProductDesign = ({
</div>
)}
{star && (
<div className="flex items-center mt-2">
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
@ -211,8 +232,10 @@ const VodProductDesign = ({
</div>
)}
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-4">
<div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
></div>
</div>
)}
</div>
@ -225,8 +248,15 @@ const VodProductDesign = ({
export default VodProductDesign;
// text colors i used:
// text-productPrice
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
// text color i used for product excerpt:
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
VodProductDesign.defaultProps = {
// icons on product image
@ -235,7 +265,7 @@ VodProductDesign.defaultProps = {
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
discountPrice: false,
priceHolder: true,
priceTitle: false,
@ -248,10 +278,35 @@ VodProductDesign.defaultProps = {
addToCartHolder: false,
productTitleColor: "text-darkCrimsonTextColor",
productExcerptTextColor: "text-productContent",
productCatTextColor: "text-darkCrimsonTextColor",
productPriceAmountTitle: "text-productPrice",
productTitleAlignment: "text-justify",
// برای درصد دادن به عرض رنج
rangeWidth: "w-44",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
productTitleAlignment: "text-justify",
priceDirection: "flex-row",
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse
// بزاریم
// دیفالتش باید این باشه:
// priceStarHolder: flex-row
priceStarHolder: "flex-row",
// دیفالتش باید این باشه:
// priceStarHolder: items-center
priceStarAlignment: "items-center",
};

@ -0,0 +1,7 @@
.playBtnImg {
transition: all 0.4s;
}
.parent-img:hover .playBtnImg {
transition: all 0.4s;
transform: translateY(-10px) !important;
}
Loading…
Cancel
Save