mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
master
mahdi 3 years ago
parent 95ad058dd0
commit 24eae462b9
1 changed files with 170 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 362
      src/components/SingleProduct/VodDesign1/index.js

362
src/components/SingleProduct/VodDesign1/index.js
Unescape View File

@ -1,19 +1,23 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import StarRating from "../StarRating"; import TagDesign1 from "../../Tag/TagDesign1";
import ReactTooltip from "react-tooltip"; import ButtonDivTag from "../../ButtonDesign/ButtonDivTag";
import Button from "../../ButtonDesign/Button";
import StarRating from "../../Rating/StarRating1";
import Tooptip1 from "../../Tooltip/Tooltip1";
import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
import watermelon from "./watermelon.png"; import watermelon from "images/VodDesign1watermelon.png";
import video from "./danovin.mp4"; import video from "images/VodDesign1danovin.mp4";
import discountImg from "./discount.png"; import discountImg from "images/VodDesign1discount.png";
import heart from "./vuesax-linear-heart.svg"; import heart from "images/VodDesign1vuesax-linear-heart.svg";
import YellowDotIcon from "./yellowDotIcon.svg"; import YellowDotIcon from "images/VodDesign1yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg"; import RedDotIcon from "images/VodDesign1redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg"; import PurpleDotIcon from "images/VodDesign1purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; import LightBlueDotIcon from "images/VodDesign1ightBlueDotIcon.svg";
import whitePlayIcon from "./white-play-button-icon.svg"; import whitePlayIcon from "images/VodDesign1white-play-button-icon.svg";
const VodDesign1 = ({ const VodDesign1 = ({
productColor, productColor,
@ -38,188 +42,176 @@ const VodDesign1 = ({
priceStarAlignment, priceStarAlignment,
rangeWidth, rangeWidth,
}) => { }) => {
const [progressFlag, setProgressFlag] = useState(false);
// const [openModal, setOpenModal] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return ( return (
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8"> <div>
رویه باتن پلی / عکس کلیک کنید <div
{/* product UI Design */} className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
<div className="flex flex-wrap sm:flex-nowrap justify-around"> >
<div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4"> {/* 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})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
}}
data-modal-toggle="large-modal"
>
{/* icons on image */}
<div className="flex flex-col gap-y-2 absolute left-2 top-2">
{discountPricePercent && (
<ButtonDivTag
icon={false}
text={discountPricePercent + "%"}
className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
/>
)}
{likeBtn && (
<Button
className={"p-2 bg-[#FFF3F3] rounded"}
text={false}
icon={"images/SingleProductvuesax-linear-heart.svg"}
iconHolderClassName={""}
iconClassName={"w-5"}
/>
)}
{discount && (
<Button
className={"rounded"}
text={false}
icon={"images/SingleProductdiscount.png"}
iconHolderClassName={""}
iconClassName={"w-10"}
/>
)}
</div>
{/* play button */}
<div <div
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
// onClick={() => setOpenModal(true)}
> >
{/* product image */} <img
src={whitePlayIcon}
alt=""
className="w-5 h-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: "آبی",
},
]}
/>
</div>
)}
</div>
{/* product content */}
<div className="px-2">
{/* content */}
<div className="mt-4 flex flex-col">
<div <div
className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer" className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
style={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
minHeight: "180px",
}}
data-modal-toggle="large-modal"
> >
{/* icons on image */} <h2 className={`${productTitleClass}`}>{productTitle}</h2>{" "}
<div className="absolute left-2 top-2"> {productCat && (
{discountPricePercent && ( <TagDesign1
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> tagClassName={"mt-2 text-xs text-[#246E8A] font-sansbold"}
<p className="text-discountPriceTitle font-sansbold text-xs"> icon={false}
23<span>%</span> title={"پایه سوم"}
</p>
</div>
)}
{likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" />
</div>
)}
{discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
</div>
{/* play button */}
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
// onClick={() => setOpenModal(true)}
>
<img
src={whitePlayIcon}
alt=""
className="w-5 h-5"
// onClick={() => setOpenModal(true)}
/> />
</div>
{/* select Color */}
{productColor && (
<div className="flex items-center absolute right-2 bottom-2">
{/* {colors.map((color,index))} */}
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)} )}
</div> </div>
{/* product content */} {/* productContent */}
<div className="px-2"> {productContent && (
{/* content */} <p className={`${productContentClass}`}>{productContent}</p>
<div className="mt-4 flex flex-col"> )}
<div </div>
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} {/* price */}
> <div
<h2 className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} >
> {priceHolder && (
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && (
<span
className={`text-xs font-light text-darkCrimsonTextColor`}
>
پایه سوم
</span>
)}
</div>
{productContent && (
<p
className={`text-justify text-sm leading-6 text-productContent`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</p>
)}
</div>
{/* price */}
<div <div
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`} className={`flex items-center justify-between ${priceDirection}`}
> >
{priceHolder && ( {/* price */}
<div className="">
<div <div
className={`flex items-center justify-between ${priceDirection}`} className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
> >
{/* price */} {priceTitle && (
<div className=""> <span className="text-xs text-borderColor ml-2">
<div قیمت
className={`${ </span>
priceDirection.indexOf("col") !== -1 )}
? "inline" {discountPrice && (
: "flex" <p className="line-through text-xs text-borderColor">
}`} <span> قیمت</span> 140<span>تومان</span>
>
{priceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{discountPrice && (
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
</div>
<p
className={`text-sm font-semibold inline text-productPrice`}
>
111.000<span>تومان</span>
</p> </p>
</div>
{/* add to cart */}
{addToCartHolder && (
<button
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)} )}
</div> </div>
)} <p
{star && ( className={`text-sm font-semibold inline text-productPrice`}
<div className="flex items-center"> >
<StarRating /> 111.000<span>تومان</span>
<span className="text-xs text-productContent font-sansbold mr-2"> </p>
39 </div>
</span> {/* add to cart */}
</div> {addToCartHolder && (
<button
className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
)} )}
</div> </div>
{productTags && ( )}
<div className="mt-2 flex flex-wrap"> {star && (
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> <div className="flex items-center mt-2">
ارسال رایگان <StarRating />
</button> <span className="text-[#707070] text-sm font-sansbold mr-2">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> 39
برچسب های دیگر </span>
</button> </div>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> )}
دسته بندی به صورت کادو
</button>
</div>
)}
{rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div
className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{
width: progressFlag ? rangeWidth : 0,
}}
></div>
</div>
)}
</div>
</div> </div>
{productTags && (
<div className="mt-4 flex flex-wrap gap-2">
{productTags.map((item, index) => (
<TagDesign1 icon={false} title={item} key={index} />
))}
</div>
)}
{progressBar && (
<AnimatedProgressbar1
rangeWidth={"75%"}
parentBg={"bg-[#D3E9FF] rtl mt-5"}
childBg={"bg-[#68A8E6]"}
/>
)}
</div> </div>
</div> </div>
<div <div
@ -252,7 +244,7 @@ const VodDesign1 = ({
<video <video
controls controls
className={`border transition-all duration-1000 className={`border transition-all duration-1000
`} `}
src={video} src={video}
type="video/mp4" type="video/mp4"
></video> ></video>
@ -260,25 +252,11 @@ const VodDesign1 = ({
</div> </div>
</div> </div>
</div> </div>
</section> </div>
); );
}; };
// hover:-translate-y-2
export default VodDesign1;
// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle
// text color i used for product excerpt: export default VodDesign1;
// text-productContent
// text color i used for product cat:
// text-darkCrimsonTextColor
// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2
VodDesign1.defaultProps = { VodDesign1.defaultProps = {
colors: [ colors: [

Write Preview
Loading…
Cancel
Save