update 4 files and delete 13 files

master
mahdi 2 years ago
parent efb8e41e48
commit bbd27322b8
  1. 7
      src/components/Avatar/UserProfileInfo/index.js
  2. 0
      src/components/ChartDesign/SemiDonut/index.js
  3. 2
      src/components/ChartDesign/index.js
  4. 2
      src/components/FileManager/index.js
  5. 56
      src/components/SingleProduct/VodDesign1/index.js
  6. BIN
      src/components/VodProduct/danovin.mp4
  7. 323
      src/components/VodProduct/index.js
  8. BIN
      src/components/VodProductNew/danovin.mp4
  9. 344
      src/components/VodProductNew/index.js
  10. 37
      src/components/testtttt/Testttt.js
  11. 3
      src/components/testtttt/book-white-cover.svg
  12. 8
      src/components/testtttt/book.svg
  13. 438
      src/components/testtttt/index.scss
  14. 5
      src/components/vodProductDesign/VodProductDesign.css
  15. 9
      src/components/vodProductDesign/VodProductDesign.css.map
  16. 334
      src/components/vodProductDesign/VodProductDesign.js
  17. 0
      src/components/vodProductDesign/VodProductDesign.scss

@ -4,12 +4,9 @@ import DateTime from "../../CurrentDateTime/DateTime";
const UserProfileInfo = () => {
return (
<div className="flex flex-row items-center w-fit m-20">
<div className="h-[54px] flex flex-row items-center w-fit m-20">
<DateTime />
<div
className="w-0.5 bg-[#9DACD344] mx-4"
style={{ height: "54px" }}
></div>
<div className="w-0.5 bg-[#9DACD344] mx-4"></div>
<ProfileInfo />
</div>
);

@ -4,6 +4,7 @@ import Recharts from "./Recharts";
import BarChartApex from "./BarChartApex";
import SimpleBarChart from "./SimpleBarChart";
import SpecifiedDomainRadarChart from "./SpecifiedDomainRadarChart";
import SemiDonut from "./SemiDonut";
function ChartDesign() {
const list = {
@ -11,6 +12,7 @@ function ChartDesign() {
2: <BarChartApex />,
3: <SimpleBarChart />,
4: <SpecifiedDomainRadarChart />,
5: <SemiDonut />,
};
const [type, setType] = useState(1);
return (

@ -9,7 +9,7 @@ import Playlist from "../MiniComponents/Playlist";
import Folderlists from "../MiniComponents/Folderlist";
import UploadDesign1 from "../UploadFile/UploadDesign1";
import BasicTable from "../Tabels/ReactTable4";
import SemiDonut from "../SemiDonut";
import SemiDonut from "../ChartDesign/SemiDonut";
const FileManager = ({ buttons }) => {
return (

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import TagDesign1 from "../../Tag/TagDesign1";
import ButtonDivTag from "../../ButtonDesign/ButtonDivTag";
@ -45,6 +45,8 @@ const VodDesign1 = ({
priceStarHolder,
priceStarAlignment,
}) => {
const [openModal, setOpenModal] = useState(false);
return (
<>
<div className={`${cardClassName}`}>
@ -91,13 +93,13 @@ const VodDesign1 = ({
{/* play button */}
<div
className={`rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 ${playButtonClass}`}
// onClick={() => setOpenModal(true)}
onClick={() => setOpenModal(true)}
>
<img
src={playImage}
alt=""
className="w-5"
// onClick={() => setOpenModal(true)}
onClick={() => setOpenModal(true)}
/>
</div>
{/* select Color */}
@ -197,38 +199,22 @@ const VodDesign1 = ({
)}
</div>
</div>
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="large-modal"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="p-6 space-y-6">
<video
controls
className={`border transition-all duration-1000
`}
src="images/VodDesign1video.mp4"
type="video/mp4"
></video>
</div>
</div>
{/* video */}
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
`}
onClick={() => setOpenModal(false)}
>
<video
controls
className={`w-[75%] p-10 border transition-all duration-300
${openModal ? "opacity-100" : "opacity-0 pointer-events-none"}
`}
src="images/VodDesign1vide.mp4"
type="video/mp4"
onClick={(e) => e.stopPropagation()}
></video>
</div>
</>
);

@ -1,323 +0,0 @@
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-sansbold 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-sansbold 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",
};

@ -1,344 +0,0 @@
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);
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",
}}
data-modal-toggle="large-modal"
>
{/* 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-sansbold 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-sansbold 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
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"
>
<div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="large-modal"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="p-6 space-y-6">
<video
controls
className={`border transition-all duration-1000
`}
src={video}
type="video/mp4"
></video>
</div>
</div>
</div>
</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",
};

@ -1,37 +0,0 @@
import React from "react";
// import "./Testttt.scss";
import book from "./book.svg";
import bookCover from "./book-white-cover.svg";
export const Testttt = ({ bookBackCoverBg }) => {
return (
<section className="my-20 ">
<div style={{ width: "20%" }} className="mx-auto">
<div
className="relative z-50 "
style={{
backgroundImage: `url(${book})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/2)",
// maxHeight: "300px",
}}
>
{/* <img
src={bookCover}
alt=""
className="h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-4 z-0"
/> */}
<div className="bg-green-400 w-4 rounded-tl-lg rounded-bl-lg h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-6 z-0"></div>
</div>
</div>
</section>
);
};
export default Testttt;
Testttt.defaultProps = {
bookBackCoverBg: "bg-greenBookBg",
};

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.489" height="304.353" viewBox="0 0 14.489 304.353">
<path id="Path_2" data-name="Path 2" d="M14.489,0,0,10.8V291.9l14.489,12.457Z" fill="#f2f2f2"/>
</svg>

Before

Width:  |  Height:  |  Size: 207 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 62 KiB

@ -1,438 +0,0 @@
// import ButtonDesign from "./components/buttonDesign/ButtonDesign";
// import ProductDesign from "./components/productDesign/ProductDesign";
// import ProductTags from "./components/productTags/ProductTags";
// import CounterDesign from "./components/counterDesign/CounterDesign";
// import BookDesign from "./components/bookDesign/BookDesign";
// import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
// import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
// import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
// import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
// import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
// import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
// import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
// import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
// import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
// import FooterDesign1 from "./components/footer/design1/FooterDesign1";
// import Testttt from "./components/testtttt/Testttt";
// import Design2D from "./components/Design2D/Design2D";
// import Features from "./components/Features/index";
// import Feedback from "./components/Feedback/index";
// 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";
// import VodProductNew from "./components/VodProductNew";
// import ProductTab from "./components/ProductTab";
// import ProductStatusCard from "./components/ProductStatusCard";
// import AdvertisementDesign1 from "./components/Advertisement/design1";
// import AdvertisementDesign2 from "./components/Advertisement/design2";
// import AdvertisementDesign3 from "./components/Advertisement/design3";
// import CourseChapter from "./components/CourseChapter";
// import SidebarMenu from "./components/Sidebar/SidebarMenu";
// import SidebarDesign2 from "./components/Sidebar/SidebarDesign2";
// import SimpleBarChart from "./components/Chart/SimpleBarChart";
// import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
// import Design1 from "./components/ProductSalesAmount/Design1";
// import Design2 from "./components/ProductSalesAmount/Design2";
// import TableDesign1 from "./components/Table/Design1";
// import ReactTable2 from "./components/ReactTable2";
// import ReactTable3 from "./components/ReactTable3";
// import ReactTable4 from "./components/ReactTable4";
// import ReactTable5 from "./components/ReactTable5";
// import Digikala from "./components/Digikala";
// import Switch from "./components/Switch";
// import BreadCrumb from "./components/BreadCrumb";
// import SearchBox from "./components/SearchBox";
// import Blogs from "./components/Blogs";
// import FileManager from "./components/FileManager";
// import Playlist from "./components/Playlist";
// import Folderlists from "./components/Folderlist";
// import CardHolder from "./components/CardHolder";
// import UploadFile from "./components/UploadFile";
// import BarChartApex from "./components/BarChartApex";
// import SemiDonut from "./components/SemiDonut";
// import FolderTree from "./components/FolderTree";
// import GridListTable from "./components/GridListTable";
// import PopupCard from "./components/PopupCard";
// import OutlineInput from "./components/OutlineInput";
// import CancleIcon from "./components/CancleIcon";
// import ButtonNewDesign from "./components/ButtonNewDesign";
// import TimeLineComponent from "./components/TimeLineComponent";
// import TitleSubtitle from "./components/TitleSubtitle";
// import TimeLine from "./components/TimeLineComponent/Timeline";
// import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther";
// import SelectYear from "./components/SelectYear";
// import IndianaDragScroll from "./components/IndianaDragScroll";
// import CardTrelloDesign from "./components/CardTrelloDesign";
// import CircleInCircle from "./components/CircleInCircle";
// import NewTagDesign from "./components/NewTagDesign";
// import AnimatedProgressBar from "./components/AnimatedProgressBar";
// import ReligiousTimes from "./components/ReligiousTimes";
// import DistributedData from "./components/DistributedData";
// import CardDesign1 from "./components/CardDesign1";
// import CustomToast from "./components/CustomToast";
// import IconText from "./components/IconText";
// import CardDesign2 from "./components/CardDesign2";
// import ButtonDivTag from "./components/ButtonDivTag";
// import Button from "./components/Button";
// import LeafletMap from "./components/LeafletMap";
// import TestComponentNew from "./components/TestComponentNew";
// import DateRangePicker from "./components/DateRangePicker";
// import BoxNextToEachOther from "./components/BoxNextToEachOther";
// import ProfileInfo from "./components/ProfileInfo";
// import UserProfileInfo from "./components/UserProfileInfo";
// import CurrentTime from "./components/CurrentTime";
// import CurrentDateShamsi from "./components/CurrentDateShamsi";
// import DateTime from "./components/DateTime";
// import CardDesign3 from "./components/CardDesign3";
// import CustomToast2 from "./components/CustomToast2";
// import ContactUsInfoCard from "./components/ContactUsInfoCard";
// import RoomCardInfo from "./components/RoomCardInfo";
// import FormInput from "./components/FormInput";
// import OutlineTextarea from "./components/OutlineTextarea";
{
/* <ProductDesign /> */
}
{
/* <VodProductDesign /> */
}
{
/* <VodProduct /> */
}
{
/* <VodProductNew /> */
}
{
/* <BookDesign /> */
}
{
/* <HeaderDesign1 /> */
}
{
/* <Blogs /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 /> */
}
{
/* <Button /> */
}
{
/* <ButtonDivTag /> */
}
{
/* ---------------------------- not usable ---------------------------- */
}
{
/* <ButtonDesign /> */
}
{
/* ---------------------------- not usable ---------------------------- */
}
{
/* <ButtonNewDesign /> */
}
{
/* ---------------------------- not usable ---------------------------- */
}
{
/* <ProductTags /> */
}
{
/* <NewTagDesign /> */
}
{
/* <CounterDesign /> */
}
{
/* <AnimatedProgressBar /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <ContactInfoSection /> */
}
{
/* <Testttt /> */
}
{
/* <Design2D /> */
}
{
/* <Features /> */
}
{
/* <Feedback /> */
}
{
/* <Alert /> */
}
{
/* <Toast /> */
}
{
/* <ProductSuggestion /> */
}
{
/* <ProductImage /> */
}
{
/* <ProductTab /> */
}
{
/* <ProductStatusCard /> */
}
{
/* <AdvertisementDesign1 /> */
}
{
/* <AdvertisementDesign2 /> */
}
{
/* <AdvertisementDesign3 /> */
}
{
/* <CourseChapter /> */
}
{
/* <Design1 /> */
}
{
/* <Design2 /> */
}
{
/* <SidebarMenu /> */
}
{
/* <SidebarDesign2 /> */
}
{
/* <SidebarDesign2 className="w-1/5" /> */
}
{
/* <TableDesign1 /> */
}
{
/* <div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div> */
}
{
/* <ReactTable2 /> */
}
{
/* <ReactTable3 /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <BreadCrumb /> */
}
{
/* <SearchBox /> */
}
{
/* <TitleSubtitle /> */
}
{
/* <FolderTree /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <ReactTable4 /> */
}
{
/* <ReactTable5 /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <Playlist /> */
}
{
/* <Folderlists /> */
}
{
/* <CardHolder /> */
}
{
/* <UploadFile /> */
}
{
/* <SimpleBarChart /> */
}
{
/* <SpecifiedDomainRadarChart /> */
}
{
/* <BarChartApex /> */
}
{
/* <SemiDonut /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <OutlineInput /> */
}
{
/* <OutlineTextarea /> */
}
{
/* <CancleIcon /> */
}
{
/* <ProfilePicNextToEachOther /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <FileManager /> */
}
{
/* <GridListTable /> */
}
{
/* <PopupCard /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <CircleInCircle /> */
}
{
/* <TimeLine /> */
}
{
/* <SelectYear /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <TimeLineComponent /> */
}
{
/* <CardTrelloDesign /> */
}
{
/* <ReligiousTimes /> */
}
{
/* <DistributedData /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <IconText /> */
}
{
/* <CustomToast /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <CardDesign1 /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <IndianaDragScroll /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <CardDesign2 /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <CustomToast2 /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <CardDesign3 /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <DateTime /> */
}
{
/* <CurrentTime /> */
}
{
/* <CurrentDateShamsi /> */
}
{
/* <ProfileInfo /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <UserProfileInfo /> */
}
{
/* <BoxNextToEachOther /> */
}
{
/* <ContactUsInfoCard /> */
}
{
/* <RoomCardInfo /> */
}
{
/* ----------------------------$$$ start---------------------------- */
}
{
/* <DateRangePicker /> */
}
{
/* ----------------------------$$$ end---------------------------- */
}
{
/* <FormInput /> */
}
{
/* <LeafletMap /> */
}
{
/* <Digikala /> */
}
{
/* <TestComponentNew /> */
}

@ -1,5 +0,0 @@
.playBtnImg {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
/*# sourceMappingURL=VodProductDesign.css.map */

@ -1,9 +0,0 @@
{
"version": 3,
"mappings": "AAAA,AAAA,WAAW,CAAC;EACV,UAAU,EAAE,QAAQ;CACrB",
"sources": [
"VodProductDesign.scss"
],
"names": [],
"file": "VodProductDesign.css"
}

@ -1,334 +0,0 @@
// it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import StarRating from "../starRating/StarRating";
import ReactTooltip from "react-tooltip";
import "./VodProductDesign.scss";
import book from "../../assets/images/goldon.png";
import watermelon from "../../assets/images/watermelon.png";
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";
import darkPlayIcon from "../../assets/icons/dark-play-button-icon.svg";
const VodProductDesign = ({
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productHolderBorder,
productHolderBorderColor,
productTitleColor,
productExcerptTextColor,
productCat,
productCatTextColor,
rangeHolder,
priceTitle,
productPriceAmountTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
playBtnBgColor,
mainPriceTitle,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
}, 1000);
});
return (
<section className="w-full sm:w-3/6 mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
vodProductDesign
</span>
</p>
</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
className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
>
{/* 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",
}}
>
{/* 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-sansbold 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 ${playBtnBgColor}`}
>
<img src={whitePlayIcon} alt="" className=" w-5 h-5" />
</div>
{/* select Color */}
{colors && (
<div className="flex items-center absolute right-2 bottom-2">
<img
src={YellowDotIcon}
alt=""
data-tip="زرد"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={RedDotIcon}
alt=""
data-tip="قرمز"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={PurpleDotIcon}
alt=""
data-tip="بنفش"
className="w-3 h-3 ml-1 cursor-pointer"
/>
<ReactTooltip place="top" type="dark" effect="float" />
<img
src={LightBlueDotIcon}
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 ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productCat && (
<span
className={`text-xs font-light ${productCatTextColor}`}
>
پایه سوم
</span>
)}
</div>
{productContent && (
<p
className={`text-justify text-sm leading-6 ${productExcerptTextColor}`}
>
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد.
</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 ${productPriceAmountTitle}`}
>
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-sansbold 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>
</section>
);
};
// hover:-translate-y-2
export default VodProductDesign;
// 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
VodProductDesign.defaultProps = {
// icons on product image
colors: 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,
productTitleColor: "text-darkCrimsonTextColor",
productExcerptTextColor: "text-productContent",
productCatTextColor: "text-darkCrimsonTextColor",
productPriceAmountTitle: "text-productPrice",
productTitleAlignment: "text-justify",
// برای درصد دادن به عرض رنج
rangeWidth: "75%",
//دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
productHolderBorder: "border",
productHolderBorderColor: "border-grayBorderColor",
priceDirection: "flex-row",
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
playBtnBgColor: "bg-playButtonIcon",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse
// بزاریم
// دیفالتش باید این باشه:
// priceStarHolder: flex-row
priceStarHolder: "flex-row",
// دیفالتش باید این باشه:
// priceStarHolder: items-center
priceStarAlignment: "items-center",
};
Loading…
Cancel
Save