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, verticalImg,
horizontalImg, horizontalImg,
rangeWidth, rangeWidth,
addToCartHolder,
}) => { }) => {
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <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="px-2">
<div className="mt-4"> <div className="mt-4">
<h2 <h2
className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
> >
نسخه چاپی علموم تجربه هفتم نسخه چاپی علموم تجربه هفتم
</h2> </h2>
{productContent && ( {productContent && (
<p <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> </p>
</div> </div>
{/* add to cart */} {/* add to cart */}
<button {addToCartHolder && (
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 ${ <button
priceDirection.indexOf("col") !== -1 ? "w-full" : "" 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> اضافه کردن به سبد خرید
</button>
)}
</div> </div>
)} )}
{productTags && ( {productTags && (
@ -275,6 +278,8 @@ ProductDesign.defaultProps = {
verticalImg: true, verticalImg: true,
horizontalImg: false, horizontalImg: false,
addToCartHolder: true,
productTitleColor: "text-productTitle", productTitleColor: "text-productTitle",
productExcerptTextColor: "text-productContent", productExcerptTextColor: "text-productContent",

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