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

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

Loading…
Cancel
Save