| After Width: | Height: | Size: 868 B | 
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 177 B | 
| After Width: | Height: | Size: 675 B | 
| After Width: | Height: | Size: 34 KiB | 
| After Width: | Height: | Size: 305 B | 
| After Width: | Height: | Size: 177 B | 
| @ -0,0 +1,344 @@ | |||||||
|  | import React, { useEffect, useState } from "react"; | ||||||
|  | 
 | ||||||
|  | import StarRating from "../StarRating"; | ||||||
|  | import ReactTooltip from "react-tooltip"; | ||||||
|  | 
 | ||||||
|  | import watermelon from "./watermelon.png"; | ||||||
|  | import video from "./danovin.mp4"; | ||||||
|  | 
 | ||||||
|  | import discountImg from "./discount.png"; | ||||||
|  | 
 | ||||||
|  | import heart from "./vuesax-linear-heart.svg"; | ||||||
|  | import YellowDotIcon from "./yellowDotIcon.svg"; | ||||||
|  | import RedDotIcon from "./redDotIcon.svg"; | ||||||
|  | import PurpleDotIcon from "./purpleDotIcon.svg"; | ||||||
|  | import LightBlueDotIcon from "./lightBlueDotIcon.svg"; | ||||||
|  | import whitePlayIcon from "./white-play-button-icon.svg"; | ||||||
|  | 
 | ||||||
|  | const VodDesign1 = ({ | ||||||
|  |   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 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:
 | ||||||
|  | // text-darkCrimsonTextColor
 | ||||||
|  | 
 | ||||||
|  | // bg color i used for play button icon:
 | ||||||
|  | // bg-playButtonIcon
 | ||||||
|  | // bg-playButtonIcon2
 | ||||||
|  | 
 | ||||||
|  | VodDesign1.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", | ||||||
|  | }; | ||||||