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. 182
      src/components/SingleProduct/VodDesign1/index.js

182
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,19 +42,8 @@ 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>
رویه باتن پلی / عکس کلیک کنید
{/* product UI Design */}
<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">
<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={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
> >
@ -66,23 +59,31 @@ const VodDesign1 = ({
data-modal-toggle="large-modal" data-modal-toggle="large-modal"
> >
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="flex flex-col gap-y-2 absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<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"> <ButtonDivTag
<p className="text-discountPriceTitle font-sansbold text-xs"> icon={false}
23<span>%</span> text={discountPricePercent + "%"}
</p> className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
</div> />
)} )}
{likeBtn && ( {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"> <Button
<img src={heart} alt="" className="w-5" /> className={"p-2 bg-[#FFF3F3] rounded"}
</div> text={false}
icon={"images/SingleProductvuesax-linear-heart.svg"}
iconHolderClassName={""}
iconClassName={"w-5"}
/>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"> <Button
<img src={discountImg} alt="" className="w-full" /> className={"rounded"}
</div> text={false}
icon={"images/SingleProductdiscount.png"}
iconHolderClassName={""}
iconClassName={"w-10"}
/>
)} )}
</div> </div>
{/* play button */} {/* play button */}
@ -98,16 +99,28 @@ const VodDesign1 = ({
/> />
</div> </div>
{/* select Color */} {/* select Color */}
{productColor && ( {tooltip && (
<div className="flex items-center absolute right-2 bottom-2"> <div className="flex items-center gap-x-1 absolute right-2 bottom-2">
{/* {colors.map((color,index))} */} <Tooptip1
<img items={[
src={YellowDotIcon} {
alt="" image: "images/SingleProductyellowDotIcon.svg",
data-tip="زرد" dataTip: "زرد",
className="w-3 h-3 ml-1 cursor-pointer" },
{
image: "images/SingleProductredDotIcon.svg",
dataTip: "قرمز",
},
{
image: "images/SingleProductpurpleDotIcon.svg",
dataTip: "بنفش",
},
{
image: "images/SingleProductlightBlueDotIcon.svg",
dataTip: "آبی",
},
]}
/> />
<ReactTooltip place="top" type="dark" effect="float" />
</div> </div>
)} )}
</div> </div>
@ -118,26 +131,18 @@ const VodDesign1 = ({
<div <div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
> >
<h2 <h2 className={`${productTitleClass}`}>{productTitle}</h2>{" "}
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && ( {productCat && (
<span <TagDesign1
className={`text-xs font-light text-darkCrimsonTextColor`} tagClassName={"mt-2 text-xs text-[#246E8A] font-sansbold"}
> icon={false}
پایه سوم title={"پایه سوم"}
</span> />
)} )}
</div> </div>
{/* productContent */}
{productContent && ( {productContent && (
<p <p className={`${productContentClass}`}>{productContent}</p>
className={`text-justify text-sm leading-6 text-productContent`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</p>
)} )}
</div> </div>
{/* price */} {/* price */}
@ -152,9 +157,7 @@ const VodDesign1 = ({
<div className=""> <div className="">
<div <div
className={`${ className={`${
priceDirection.indexOf("col") !== -1 priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
? "inline"
: "flex"
}`} }`}
> >
{priceTitle && ( {priceTitle && (
@ -187,41 +190,30 @@ const VodDesign1 = ({
</div> </div>
)} )}
{star && ( {star && (
<div className="flex items-center"> <div className="flex items-center mt-2">
<StarRating /> <StarRating />
<span className="text-xs text-productContent font-sansbold mr-2"> <span className="text-[#707070] text-sm font-sansbold mr-2">
39 39
</span> </span>
</div> </div>
)} )}
</div> </div>
{productTags && ( {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-4 flex flex-wrap gap-2">
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs"> {productTags.map((item, index) => (
ارسال رایگان <TagDesign1 icon={false} title={item} key={index} />
</button> ))}
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
دسته بندی به صورت کادو
</button>
</div> </div>
)} )}
{rangeHolder && ( {progressBar && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <AnimatedProgressbar1
<div rangeWidth={"75%"}
className={`bg-rangeFillBgColor h-3 rounded duration-500`} parentBg={"bg-[#D3E9FF] rtl mt-5"}
style={{ childBg={"bg-[#68A8E6]"}
width: progressFlag ? rangeWidth : 0, />
}}
></div>
</div>
)} )}
</div> </div>
</div> </div>
</div>
</div>
<div <div
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
id="large-modal" id="large-modal"
@ -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:
// text-productContent
// text color i used for product cat: export default VodDesign1;
// 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