update src/components/SingleProduct/ProductDesign1/index.js and src/components/SingleProduct/VodDesign1/index.js

master
mahdi 2 years ago
parent 24eae462b9
commit 54e33be271
  1. 117
      src/components/SingleProduct/VodDesign1/index.js

@ -7,32 +7,35 @@ import StarRating from "../../Rating/StarRating1";
import Tooptip1 from "../../Tooltip/Tooltip1";
import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
import watermelon from "images/VodDesign1watermelon.png";
import video from "images/VodDesign1danovin.mp4";
import discountImg from "images/VodDesign1discount.png";
import heart from "images/VodDesign1vuesax-linear-heart.svg";
import YellowDotIcon from "images/VodDesign1yellowDotIcon.svg";
import RedDotIcon from "images/VodDesign1redDotIcon.svg";
import PurpleDotIcon from "images/VodDesign1purpleDotIcon.svg";
import LightBlueDotIcon from "images/VodDesign1ightBlueDotIcon.svg";
import whitePlayIcon from "images/VodDesign1white-play-button-icon.svg";
const VodDesign1 = ({
productColor,
colors,
productHolderClassname,
discountPricePercent,
likeBtn,
discount,
discountPricePercent,
discountPrice,
tooltip,
productTitle,
productTitleClass,
productContent,
productContentClass,
productCat,
star,
discountPrice,
price,
progressBar,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productCat,
rangeHolder,
priceTitle,
addToCartHolder,
@ -40,18 +43,15 @@ const VodDesign1 = ({
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
}) => {
return (
<div>
<div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
>
<>
<div className={`${productHolderClassname}`}>
{/* product image */}
<div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{
backgroundImage: `url(${watermelon})`,
backgroundImage: `url("images/VodDesign1watermelon.png")`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
@ -88,39 +88,20 @@ const VodDesign1 = ({
</div>
{/* play button */}
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
className="rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-[#0D0D0D99]"
// onClick={() => setOpenModal(true)}
>
<img
src={whitePlayIcon}
src="images/VodDesign1white-play-button-icon.svg"
alt=""
className="w-5 h-5"
className="w-5"
// onClick={() => setOpenModal(true)}
/>
</div>
{/* select Color */}
{tooltip && (
<div className="flex items-center gap-x-1 absolute right-2 bottom-2">
<Tooptip1
items={[
{
image: "images/SingleProductyellowDotIcon.svg",
dataTip: "زرد",
},
{
image: "images/SingleProductredDotIcon.svg",
dataTip: "قرمز",
},
{
image: "images/SingleProductpurpleDotIcon.svg",
dataTip: "بنفش",
},
{
image: "images/SingleProductlightBlueDotIcon.svg",
dataTip: "آبی",
},
]}
/>
<Tooptip1 />
</div>
)}
</div>
@ -245,46 +226,32 @@ const VodDesign1 = ({
controls
className={`border transition-all duration-1000
`}
src={video}
src="images/VodDesign1danovin.mp4"
type="video/mp4"
></video>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default VodDesign1;
VodDesign1.defaultProps = {
colors: [
{
icon: YellowDotIcon,
dataType: "زرد",
},
{
icon: RedDotIcon,
dataType: "قرمز",
},
{
icon: PurpleDotIcon,
dataType: "بنفش",
},
{
icon: LightBlueDotIcon,
dataType: "آبی",
},
productHolderClassname:
"min-w-[600px] rounded-lg shadow-sm p-20 border border-[#C3C3C3]",
discountPricePercent: "23",
likeBtn: true,
discount: true,
LightBlueDotIcon,
],
productTitle: "نسخه چاپی علموم تجربه هفتم",
productTitleClass: "text-sm text-justify text-[#246E8A]",
// icons on product image
productColor: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
priceHolder: true,
@ -301,22 +268,12 @@ VodDesign1.defaultProps = {
productTitleAlignment: "text-justify",
// برای درصد دادن به عرض رنج
rangeWidth: "75%",
priceDirection: "flex-row",
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse
// بزاریم
// دیفالتش باید این باشه:
// priceStarHolder: flex-row
priceStarHolder: "flex-row",
// دیفالتش باید این باشه:
// priceStarHolder: items-center
priceStarAlignment: "items-center",
};

Loading…
Cancel
Save