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

Loading…
Cancel
Save