master
mahdi 3 years ago
parent 342b702af2
commit f23606f397
  1. 6
      src/App.js
  2. BIN
      src/components/VodProduct/danovin.mp4
  3. 323
      src/components/VodProduct/index.js

@ -26,13 +26,15 @@ import Alert from "./components/Alert";
import Toast from "./components/Toast";
import ProductSuggestion from "./components/ProductSuggestion";
import ProductImage from "./components/ProductImage";
import VodProduct from "./components/VodProduct";
function App() {
return (
<Provider store={store}>
<div className="App">
<ProductDesign />
<VodProductDesign />
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
<VodProduct />
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}

@ -0,0 +1,323 @@
import React, { useEffect, useState } from "react";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import watermelon from "../../assets/images/watermelon.png";
import video from "./danovin.mp4";
import discountImg from "../../assets/icons/discount.png";
import heart from "../../assets/icons/vuesax-linear-heart.svg";
import YellowDotIcon from "../../assets/icons/yellowDotIcon.svg";
import RedDotIcon from "../../assets/icons/redDotIcon.svg";
import PurpleDotIcon from "../../assets/icons/purpleDotIcon.svg";
import LightBlueDotIcon from "../../assets/icons/lightBlueDotIcon.svg";
import whitePlayIcon from "../../assets/icons/white-play-button-icon.svg";
const VodProduct = ({
productColor,
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productCat,
rangeHolder,
priceTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
const [openModal, setOpenModal] = useState(false);
// const [closeModal, setCloseModal] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return (
<section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* 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
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
>
{/* 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",
}}
onClick={() => setOpenModal(true)}
>
{/* icons on image */}
<div className="absolute left-2 top-2">
{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">
<p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span>
</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>
{/* product content */}
<div className="px-2">
{/* content */}
<div className="mt-4 flex flex-col">
<div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<h2
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</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
className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
>
{priceHolder && (
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="">
<div
className={`${
priceDirection.indexOf("col") !== -1
? "inline"
: "flex"
}`}
>
{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>
</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>
)}
{star && (
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
</div>
{productTags && (
<div className="mt-2 flex flex-wrap">
<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>
<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>
</div>
<div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
${openModal ? "opacity-80" : "opacity-10 pointer-events-none"}
`}
onClick={() => setOpenModal(false)}
>
<video
controls
className={`border transition-all duration-1000
${openModal ? "opacity-100" : "opacity-0 pointer-events-none"}
`}
src={video}
type="video/mp4"
onClick={(e) => e.stopPropagation()}
></video>
</div>
</section>
);
};
// hover:-translate-y-2
export default VodProduct;
// 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:
// text-darkCrimsonTextColor
// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2
VodProduct.defaultProps = {
colors: [
{
icon: YellowDotIcon,
dataType: "زرد",
},
{
icon: RedDotIcon,
dataType: "قرمز",
},
{
icon: PurpleDotIcon,
dataType: "بنفش",
},
{
icon: LightBlueDotIcon,
dataType: "آبی",
},
LightBlueDotIcon,
],
// icons on product image
productColor: true,
likeBtn: true,
discount: true,
discountPricePercent: true,
// product price
discountPrice: true,
priceHolder: true,
priceTitle: false,
productContent: false,
star: true,
productTags: false,
productCat: true,
rangeHolder: true,
addToCartHolder: false,
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