master
mahdi 3 years ago
parent 7197613a94
commit 4f7436a127
  1. 33
      src/components/productDesign/ProductDesign.js
  2. 7
      src/components/vodProductDesign/VodProductDesign.js

@ -5,15 +5,13 @@ import StarRating from "../starRating/StarRating";
import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import discountImg from "../../assets/icons/discount.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
const ProductDesign = ({
colors,
@ -79,7 +77,7 @@ const ProductDesign = ({
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} bg-green-100`}
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>
<div className="w-full relative">
{discountPricePercent && (
@ -108,11 +106,6 @@ const ProductDesign = ({
<img src={watermelon} alt="" className="w-full rounded-lg" />
)}
</div>
{/* play button */}
<div className="bg-red-900">
<img src={whitePlayIcon} alt="" />
{/* transform -translate-x-1/2 -translate-y-1/2 */}
</div>
{/* select Color */}
{colors && (
<div className="flex items-center absolute right-2 bottom-2">
@ -217,19 +210,19 @@ export default ProductDesign;
// text-productTitle
ProductDesign.defaultProps = {
colors: false,
likeBtn: false,
discount: false,
discountPricePercent: false,
discountPrice: false,
productContent: false,
star: false,
productTags: false,
priceHolder: false,
colors: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
discountPrice: true,
productContent: true,
star: true,
productTags: true,
priceHolder: true,
productCat: true,
rangeHolder: true,
verticalImg: false,
horizontalImg: true,
verticalImg: true,
horizontalImg: false,
productTitleColor: "text-darkCrimsonTextColor",
productHolderBorder: "border-0",
productHolderBorderColor: "border-grayBorderColor",

@ -41,10 +41,10 @@ const VodProductDesign = ({
<div className="flex flex-wrap sm:flex-nowrap justify-around">
<div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
<div
className={`w-full sm:w-60 md:w-72 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}`}
>
<div
className="w-full relative flex items-center justify-center"
className="w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
@ -55,7 +55,6 @@ const VodProductDesign = ({
{/* play button */}
<div className="bg-playButtonIcon rounded-full p-4">
<img src={whitePlayIcon} alt="" className="w-5 h-5" />
{/* transform -translate-x-1/2 -translate-y-1/2 */}
</div>
{/* select Color */}
{colors && (
@ -157,7 +156,7 @@ const VodProductDesign = ({
export default VodProductDesign;
VodProductDesign.defaultProps = {
colors: true,
colors: false,
likeBtn: false,
discount: false,
discountPricePercent: false,

Loading…
Cancel
Save