| After Width: | Height: | Size: 1.5 KiB | 
| @ -0,0 +1,97 @@ | |||||||
|  | .checkbox-symbol { | ||||||
|  |     position: absolute; | ||||||
|  |     width: 0; | ||||||
|  |     height: 0; | ||||||
|  |     pointer-events: none; | ||||||
|  |     user-select: none; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox-container { | ||||||
|  |     box-sizing: border-box; | ||||||
|  |     color: #222; | ||||||
|  |     height: 30px; | ||||||
|  |     display: flex; | ||||||
|  |     justify-content: center; | ||||||
|  |     align-items: center; | ||||||
|  |     flex-flow: row wrap; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox-container * { | ||||||
|  |     box-sizing: border-box; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox-input { | ||||||
|  |     position: absolute; | ||||||
|  |     visibility: hidden; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox { | ||||||
|  |     user-select: none; | ||||||
|  |     cursor: pointer; | ||||||
|  |     padding: 6px 8px; | ||||||
|  |     border-radius: 6px; | ||||||
|  |     overflow: hidden; | ||||||
|  |     transition: all 0.3s ease; | ||||||
|  |     display: flex; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox:not(:last-child) { | ||||||
|  |     margin-right: 6px; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox:hover { | ||||||
|  |     background: inherit; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox span { | ||||||
|  |     vertical-align: middle; | ||||||
|  |     transform: translate3d(0, 0, 0); | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox span:first-child { | ||||||
|  |     position: relative; | ||||||
|  |     flex: 0 0 18px; | ||||||
|  |     width: 18px; | ||||||
|  |     height: 18px; | ||||||
|  |     border-radius: 4px; | ||||||
|  |     transform: scale(1); | ||||||
|  |     border: 1px solid #cccfdb; | ||||||
|  |     transition: all 0.3s ease; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox span:first-child svg { | ||||||
|  |     position: absolute; | ||||||
|  |     top: 3px; | ||||||
|  |     left: 2px; | ||||||
|  |     fill: none; | ||||||
|  |     stroke: #fff; | ||||||
|  |     stroke-dasharray: 16px; | ||||||
|  |     stroke-dashoffset: 16px; | ||||||
|  |     transition: all 0.3s ease; | ||||||
|  |     transform: translate3d(0, 0, 0); | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox span:last-child { | ||||||
|  |     padding-left: 8px; | ||||||
|  |     line-height: 18px; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox:hover span:first-child { | ||||||
|  |     border-color: #0077ff; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox-input:checked + .checkbox span:first-child { | ||||||
|  |     background: #0077ff; | ||||||
|  |     border-color: #0077ff; | ||||||
|  |     animation: zoom-in-out 0.3s ease; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .checkbox-input:checked + .checkbox span:first-child svg { | ||||||
|  |     stroke-dashoffset: 0; | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   @keyframes zoom-in-out { | ||||||
|  |     50% { | ||||||
|  |       transform: scale(0.9); | ||||||
|  |     } | ||||||
|  |   } | ||||||
| @ -0,0 +1,30 @@ | |||||||
|  | import React from "react"; | ||||||
|  | import './index.css'; | ||||||
|  | 
 | ||||||
|  | export default function Checkbox(props) { | ||||||
|  |   return ( | ||||||
|  |     <div> | ||||||
|  |       <svg className="checkbox-symbol"> | ||||||
|  |         <symbol id="check" viewBox="0 0 12 10"> | ||||||
|  |           <polyline | ||||||
|  |             points="1.5 6 4.5 9 10.5 1" | ||||||
|  |             strokeLinecap="round" | ||||||
|  |             strokeLinejoin="round" | ||||||
|  |             strokeWidth="2" | ||||||
|  |           ></polyline> | ||||||
|  |         </symbol> | ||||||
|  |       </svg> | ||||||
|  | 
 | ||||||
|  |       <div className="checkbox-container"> | ||||||
|  |         <input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} /> | ||||||
|  |         <label className="checkbox" htmlFor="apples"> | ||||||
|  |           <span> | ||||||
|  |             <svg width="12px" height="10px"> | ||||||
|  |               <use xlinkHref="#check"></use> | ||||||
|  |             </svg> | ||||||
|  |           </span> | ||||||
|  |         </label> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | } | ||||||
| After Width: | Height: | Size: 868 B | 
| After Width: | Height: | Size: 86 KiB | 
| @ -0,0 +1,268 @@ | |||||||
|  | import React, { useState } from "react"; | ||||||
|  | 
 | ||||||
|  | import StarRating from "../StarRating"; | ||||||
|  | // import Tag from "../Tag";
 | ||||||
|  | // import ReactTooltip from "react-tooltip";
 | ||||||
|  | 
 | ||||||
|  | import book from "./goldon.png"; | ||||||
|  | import watermelon from "./watermelon.png"; | ||||||
|  | import heart from "./vuesax-linear-heart.svg"; | ||||||
|  | import discountImg from "./discount.png"; | ||||||
|  | import YellowDotIcon from "./yellowDotIcon.svg"; | ||||||
|  | import RedDotIcon from "./redDotIcon.svg"; | ||||||
|  | import PurpleDotIcon from "./purpleDotIcon.svg"; | ||||||
|  | import LightBlueDotIcon from "./lightBlueDotIcon.svg"; | ||||||
|  | 
 | ||||||
|  | const ProductDesign = ({ | ||||||
|  |   colors, | ||||||
|  |   likeBtn, | ||||||
|  |   discount, | ||||||
|  |   discountPricePercent, | ||||||
|  |   discountPrice, | ||||||
|  |   productContent, | ||||||
|  |   star, | ||||||
|  |   productTags, | ||||||
|  |   priceDirection, | ||||||
|  |   productTitleAlignment, | ||||||
|  |   priceHolder, | ||||||
|  |   productHolderBorder, | ||||||
|  |   productHolderBorderColor, | ||||||
|  |   productTitleColor, | ||||||
|  |   productExcerptTextColor, | ||||||
|  |   productCat, | ||||||
|  |   productCatTextColor, | ||||||
|  |   rangeHolder, | ||||||
|  |   verticalImg, | ||||||
|  |   horizontalImg, | ||||||
|  |   rangeWidth, | ||||||
|  |   addToCartHolder, | ||||||
|  |   productName, | ||||||
|  |   productPrice, | ||||||
|  |   productImg, | ||||||
|  |   writeGHEIMAT, | ||||||
|  |   numberOfRegards, | ||||||
|  |   productHolderHoverBorder | ||||||
|  | }) => { | ||||||
|  |   const [isHovering, setIsHovering] = useState(false); | ||||||
|  |   return ( | ||||||
|  |     <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3"> | ||||||
|  |       <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4"> | ||||||
|  |         <div | ||||||
|  |           className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`} | ||||||
|  |         > | ||||||
|  |           {/* product image */} | ||||||
|  |           <div className="w-full relative"> | ||||||
|  |             {/* icons on image */} | ||||||
|  |             <div className="absolute left-2 top-2"> | ||||||
|  |               {discountPricePercent && ( | ||||||
|  |                 <div className="bg-discountPriceBg rounded-md px-2"> | ||||||
|  |                   <p className="text-discountPriceTitle font-bold text-xs"> | ||||||
|  |                     23<span>%</span> | ||||||
|  |                   </p> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |               {likeBtn && ( | ||||||
|  |                 <div className="bg-likeBtnBg rounded-md flex justify-center my-2"> | ||||||
|  |                   <img src={heart} alt="" className="w-5" /> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |               {discount && ( | ||||||
|  |                 <div className="rounded-md"> | ||||||
|  |                   <img src={discountImg} alt="" className="w-full" /> | ||||||
|  |                 </div> | ||||||
|  |               )} | ||||||
|  |             </div> | ||||||
|  |             {/* img */} | ||||||
|  |             <div className="w-full h-48 flex bg-grayF4 p-0 justify-center rounded-lg"> | ||||||
|  |               {verticalImg && ( | ||||||
|  |                 <img | ||||||
|  |                   src={productImg} | ||||||
|  |                   alt="" | ||||||
|  |                   className="h-full rounded-lg cursor-pointer py-8" | ||||||
|  |                   onMouseEnter={() => setIsHovering(true)} | ||||||
|  |                   onMouseLeave={() => setIsHovering(false)} | ||||||
|  |                 /> | ||||||
|  |               )} | ||||||
|  |               {horizontalImg && ( | ||||||
|  |                 <img src={watermelon} alt="" className="w-full rounded-lg" /> | ||||||
|  |               )} | ||||||
|  |             </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 | ||||||
|  |               className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${ | ||||||
|  |                 isHovering ? "" : "hidden" | ||||||
|  |               }`}
 | ||||||
|  |             > | ||||||
|  |               {/* <button>افزودن به سبد خرید</button> */} | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |           {/* product content */} | ||||||
|  |           <div className="px-2"> | ||||||
|  |             <div className="mt-4"> | ||||||
|  |               <h2 | ||||||
|  |                 className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`} | ||||||
|  |               > | ||||||
|  |                 {productName} | ||||||
|  |               </h2> | ||||||
|  |               {productContent && ( | ||||||
|  |                 <p | ||||||
|  |                   className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`} | ||||||
|  |                 > | ||||||
|  |                   این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب | ||||||
|  |                   دیگری نیز دارد. | ||||||
|  |                 </p> | ||||||
|  |               )} | ||||||
|  |               {productCat && ( | ||||||
|  |                 <span className={`text-sm font-light ${productCatTextColor}`}> | ||||||
|  |                   {productCat} | ||||||
|  |                 </span> | ||||||
|  |               )} | ||||||
|  |             </div> | ||||||
|  |             {/* star */} | ||||||
|  |             {star && ( | ||||||
|  |               <div className="flex items-center mt-2"> | ||||||
|  |                 <StarRating /> | ||||||
|  |                 <span className="text-sm-1 text-productContent font-bold mr-2"> | ||||||
|  |                   بر اساس {numberOfRegards} بررسی | ||||||
|  |                 </span> | ||||||
|  |               </div> | ||||||
|  |             )} | ||||||
|  |             {/* price */} | ||||||
|  |             {priceHolder && ( | ||||||
|  |               <div | ||||||
|  |                 className={`flex items-center justify-between ${priceDirection}`} | ||||||
|  |               > | ||||||
|  |                 <div className="mt-2"> | ||||||
|  |                   <div | ||||||
|  |                     className={`${ | ||||||
|  |                       priceDirection.indexOf("col") !== -1 ? "inline" : "flex" | ||||||
|  |                     }`}
 | ||||||
|  |                   > | ||||||
|  |                     {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>} | ||||||
|  |                     {/* price with line on it */} | ||||||
|  |                     {discountPrice && ( | ||||||
|  |                       <p className="line-through text-xs text-borderColor mr-2"> | ||||||
|  |                         145<span>تومان</span> | ||||||
|  |                       </p> | ||||||
|  |                     )} | ||||||
|  |                   </div> | ||||||
|  |                   <p className="text-sm text-productPrice font-semibold inline text-blue5F"> | ||||||
|  |                     {productPrice} <span>تومان</span> | ||||||
|  |                   </p> | ||||||
|  |                 </div> | ||||||
|  |                 {/* add to cart */} | ||||||
|  |                 {addToCartHolder && ( | ||||||
|  |                   <button | ||||||
|  |                     className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ | ||||||
|  |                       priceDirection.indexOf("col") !== -1 ? "w-full" : "" | ||||||
|  |                     }`}
 | ||||||
|  |                   > | ||||||
|  |                     اضافه کردن به سبد خرید | ||||||
|  |                   </button> | ||||||
|  |                 )} | ||||||
|  |               </div> | ||||||
|  |             )} | ||||||
|  |             {/* {productTags && ( | ||||||
|  |               <div className="mt-2 flex flex-wrap"> | ||||||
|  |                 { | ||||||
|  |                   productTags.map((item, index) => <Tag title={item} key={index} />) | ||||||
|  |                 } | ||||||
|  |               </div> | ||||||
|  |             )} */} | ||||||
|  |             {rangeHolder && ( | ||||||
|  |               <div className="bg-rangeBgColor h-3 w-full rounded mt-2"> | ||||||
|  |                 <div | ||||||
|  |                   className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`} | ||||||
|  |                 ></div> | ||||||
|  |               </div> | ||||||
|  |             )} | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default ProductDesign; | ||||||
|  | 
 | ||||||
|  | // 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
 | ||||||
|  | 
 | ||||||
|  | ProductDesign.defaultProps = { | ||||||
|  |   // icons on product image
 | ||||||
|  |   colors: false, | ||||||
|  |   likeBtn: false, | ||||||
|  |   discount: false, | ||||||
|  |   discountPricePercent: false, | ||||||
|  |   // product price
 | ||||||
|  |   discountPrice: false, | ||||||
|  |   priceHolder: true, | ||||||
|  | 
 | ||||||
|  |   productContent: false, | ||||||
|  |   star: true, | ||||||
|  |   productTags: [], | ||||||
|  |   productCat: true, | ||||||
|  |   rangeHolder: true, | ||||||
|  | 
 | ||||||
|  |   // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
 | ||||||
|  |   verticalImg: true, | ||||||
|  |   horizontalImg: false, | ||||||
|  | 
 | ||||||
|  |   addToCartHolder: false, | ||||||
|  | 
 | ||||||
|  |   productTitleColor: "text-productTitle", | ||||||
|  | 
 | ||||||
|  |   productExcerptTextColor: "text-productContent", | ||||||
|  | 
 | ||||||
|  |   productCatTextColor: "text-darkCrimsonTextColor", | ||||||
|  |   // برای درصد دادن به عرض رنج
 | ||||||
|  |   rangeWidth: "w-44", | ||||||
|  |   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
 | ||||||
|  |   productHolderBorder: "border", | ||||||
|  |   productHolderBorderColor: "border-grayBorderColor", | ||||||
|  | 
 | ||||||
|  |   productTitleAlignment: "text-justify", | ||||||
|  |   //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
 | ||||||
|  |   priceDirection: "flex-row", | ||||||
|  |   productImg: book, | ||||||
|  |   writeGHEIMAT: false | ||||||
|  | }; | ||||||
| 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: 177 B | 
| After Width: | Height: | Size: 229 B | 
| @ -0,0 +1,173 @@ | |||||||
|  | import React, { useState, useEffect } from "react"; | ||||||
|  | import searchIcon from "./search.png"; | ||||||
|  | import _ from "lodash"; | ||||||
|  | import Checkbox from "../Checkbox"; | ||||||
|  | import arrowIcon from "./arrow-top.png"; | ||||||
|  | 
 | ||||||
|  | const langDetector = (lang = "fa", option1, option2) => { | ||||||
|  |   return lang === "fa" ? option1 : option2; | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default function VerticalExpandableProductFilter(props) { | ||||||
|  |   const [text, setText] = useState(""); | ||||||
|  |   const [searchResult, setSearchResult] = useState([]); | ||||||
|  |   useEffect(() => { | ||||||
|  |     let fakeSearchResult; | ||||||
|  |     fakeSearchResult = props.list.filter( | ||||||
|  |       (item1) => item1.name.indexOf(text) !== -1 | ||||||
|  |     ); | ||||||
|  |     setSearchResult(fakeSearchResult); | ||||||
|  |   }, [text]); | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <div className="flex flex-col w-full border border-solid border-gray-100 rounded-md pt-6 bg-transparent max-h-screen bg-white my-3"> | ||||||
|  |       <strong className="text-md text-gray-500 w-full mb-3 text-right px-3"> | ||||||
|  |         {props.title} | ||||||
|  |       </strong> | ||||||
|  |      {props.searchAble && <form className="relative w-full px-3 mb-3"> | ||||||
|  |         <input | ||||||
|  |           type="text" | ||||||
|  |           placeholder={_.join( | ||||||
|  |             [langDetector(props.lang, "جستجو...", "Search...")], | ||||||
|  |             " " | ||||||
|  |           )} | ||||||
|  |           className="border rounded-md py-1 px-2 w-full placeholder-gray-300 outline-none text-gray-500" | ||||||
|  |           onChange={(e) => setText(e.target.value)} | ||||||
|  |         /> | ||||||
|  |         <span | ||||||
|  |           className={_.join( | ||||||
|  |             [ | ||||||
|  |               "absolute inset-y-0 flex items-center", | ||||||
|  |               langDetector(props.lang, "left-4", "right-4"), | ||||||
|  |             ], | ||||||
|  |             " " | ||||||
|  |           )} | ||||||
|  |         > | ||||||
|  |           <button | ||||||
|  |             type="submit" | ||||||
|  |             className="p-1 focus:outline-none focus:shadow-outline" | ||||||
|  |           > | ||||||
|  |             <img src={searchIcon} className="w-5 h-5" alt="" /> | ||||||
|  |           </button> | ||||||
|  |         </span> | ||||||
|  |       </form>} | ||||||
|  |       <ul className="w-full list-none flex flex-col divide-y divide-gray-100"> | ||||||
|  |         {(searchResult.length > 0 ? searchResult : props.list)?.map( | ||||||
|  |           (item1, i) => ( | ||||||
|  |             <li | ||||||
|  |               key={i} | ||||||
|  |               className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2" | ||||||
|  |             > | ||||||
|  |               <div className="flex flex-row items-center"> | ||||||
|  |                 <Checkbox /> | ||||||
|  |                 <strong className="text-xs font-light text-gray-500"> | ||||||
|  |                   {item1.name} | ||||||
|  |                 </strong> | ||||||
|  |               </div> | ||||||
|  | 
 | ||||||
|  |               {item1.subList?.length > 0 && ( | ||||||
|  |                 <img | ||||||
|  |                   src={arrowIcon} | ||||||
|  |                   alt="" | ||||||
|  |                   className={_.join( | ||||||
|  |                     [ | ||||||
|  |                       "cursor-pointer w-5 transform transition-all duration-300", | ||||||
|  |                       item1.expaneded ? "" : "rotate-180", | ||||||
|  |                     ], | ||||||
|  |                     " " | ||||||
|  |                   )} | ||||||
|  |                 /> | ||||||
|  |               )} | ||||||
|  |             </li> | ||||||
|  |           ) | ||||||
|  |         )} | ||||||
|  |       </ul> | ||||||
|  |       {props.btnTitle && <div className="flex align-center justify-center"> | ||||||
|  |       <button className="my-4 bg-blueFFOP text-sm bg-opacity-40 transition-all w-4/5 py-3 px-6 rounded text-blueC0 hover:text-white hover:bg-blueC0" onClick={props.btnClicked}>{props.btnTitle}</button> | ||||||
|  |       </div>} | ||||||
|  |     </div> | ||||||
|  |   ); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | VerticalExpandableProductFilter.defaultProps = { | ||||||
|  |   list: [ | ||||||
|  |     { | ||||||
|  |       id: 0, | ||||||
|  |       name: "وسایل آشپزخانه", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 3, | ||||||
|  |       name: "ماشین و موتور سیکلت", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [ | ||||||
|  |         { | ||||||
|  |           id: 4, | ||||||
|  |           name: "ماشین", | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 5, | ||||||
|  |           name: "موتور", | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 6, | ||||||
|  |       name: "اتاق خواب", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [ | ||||||
|  |         { | ||||||
|  |           id: 7, | ||||||
|  |           name: "کمد", | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 8, | ||||||
|  |           name: "تخت خواب", | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 9, | ||||||
|  |       name: "دکوراسیون و چیدمان", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 10, | ||||||
|  |       name: "وسایل بهداشت شخصی", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [ | ||||||
|  |         { | ||||||
|  |           id: 11, | ||||||
|  |           name: "مسواک", | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 12, | ||||||
|  |           name: "حوله", | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 13, | ||||||
|  |       name: "وسایل بهداشت شخصی", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [ | ||||||
|  |         { | ||||||
|  |           id: 14, | ||||||
|  |           name: "مسواک", | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 15, | ||||||
|  |           name: "حوله", | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       id: 16, | ||||||
|  |       name: "وسایل بهداشت شخصی", | ||||||
|  |       expaneded: false, | ||||||
|  |       subList: [], | ||||||
|  |     }, | ||||||
|  |   ], | ||||||
|  | }; | ||||||
| After Width: | Height: | Size: 857 B | 
| @ -1,14 +1,114 @@ | |||||||
| import React from 'react'; | import React, { useState, useEffect, useCallback } from "react"; | ||||||
| import { connect } from 'react-redux'; | import { connect } from 'react-redux'; | ||||||
|  | import { Link } from "react-router-dom"; | ||||||
|  | import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; | ||||||
| 
 | 
 | ||||||
| export const Main = ({}) => { | import Product from '../../../components/Product' | ||||||
|   return <div className="flex flex-col w-3/4 p-4 bg-green-300"> | import { book, publicApi } from "../../../redux/actions"; | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | export const Main = ({ isMobile, | ||||||
|  |   books, | ||||||
|  |   getList, | ||||||
|  |   grades, | ||||||
|  |   gradeFilter, | ||||||
|  |   selectedGrade, | ||||||
|  |   gradeFilterBooks, | ||||||
|  |   setHeaderOptions, | ||||||
|  |   headerOptions, }) => { | ||||||
|  |   const [filter, setFilter] = useState({ | ||||||
|  |     search: "", | ||||||
|  |     grade: "", | ||||||
|  |     productsType: "کتاب", | ||||||
|  |   }); | ||||||
|  |   const [desktopContentTransform, setDesktopContentTransform] = useState(false); | ||||||
|  | 
 | ||||||
|  |   const onChange = (name, value) => { | ||||||
|  |     setFilter({ ...filter, [name]: value }); | ||||||
|  |   }; | ||||||
|  | 
 | ||||||
|  |   const filteringNavItems = [ | ||||||
|  |     { | ||||||
|  |       title: 'بیشترین بازدید' | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       title: 'پرفروش ترین' | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       title: 'کمترین قیمت' | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       title: 'بیشترین قیمت' | ||||||
|  |     }, | ||||||
|  |     { | ||||||
|  |       title: 'محبوب ترین' | ||||||
|  |     }, | ||||||
|  |   ]; | ||||||
|  |   return <div className="flex flex-col w-3/4 p-4"> | ||||||
|  |     <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52"> | ||||||
|  |       <div className='flex text-xs items-center mx-4'> | ||||||
|  |         <img src={filterIcon} /> | ||||||
|  |         <span> | ||||||
|  |           مرتب سازی بر اساس | ||||||
|  |         </span> | ||||||
|  |       </div> | ||||||
|  |       <ul className='flex justify-between w-3/4 px-4 py-0 '> | ||||||
|  |         { | ||||||
|  |           filteringNavItems.map(e => ( | ||||||
|  |             <li className='text-sm rounded py-2 px-6 transition-all	hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li> | ||||||
|  |           )) | ||||||
|  |         } | ||||||
|  |       </ul> | ||||||
|  |     </div> | ||||||
|  |     
 | ||||||
|  |       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center"> | ||||||
|  |         {selectedGrade | ||||||
|  |           ? gradeFilterBooks?.map((product, index) => ( | ||||||
|  |             <Product | ||||||
|  |               key={index} | ||||||
|  |               productsType={filter.productsType} | ||||||
|  |               product={product} | ||||||
|  |               index={Number(index)} | ||||||
|  |               grades={grades} | ||||||
|  |             /> | ||||||
|  |           )) | ||||||
|  |           : books?.map((product, index) => ( | ||||||
|  |             <Link to={"/products/" + product?.id}> | ||||||
|  |               <Product | ||||||
|  |                 key={index} | ||||||
|  |                 productsType={filter.productsType} | ||||||
|  |                 product={product} | ||||||
|  |                 index={Number(index)} | ||||||
|  |                 productName={`کتاب ${product?.name}`} | ||||||
|  |                 productCat={`پایه ${grades[product?.gradeId]}`} | ||||||
|  |                 productPrice={100000} | ||||||
|  |                 productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds} | ||||||
|  |                 numberOfRegards={160} | ||||||
|  |                 productTitleColor='text-blue5F' | ||||||
|  |                 productCatTextColor='text-blueC0' | ||||||
|  |                 productHolderBorder='' | ||||||
|  |                 productHolderHoverBorder='shadow-md' | ||||||
|  |               /> | ||||||
|  |             </Link> | ||||||
|  |           ))} | ||||||
|  |       </div> | ||||||
|     
 |     
 | ||||||
|   </div>; |   </div>; | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| const mapStateToProps = (state) => ({}); | const mapStateToProps = (state) => ({ | ||||||
|  |   isDark: state.publicApi.isDark, | ||||||
|  |   isMobile: state.publicApi.isMobile, | ||||||
|  |   books: state.book.list, | ||||||
|  |   grades: state.publicApi.grades, | ||||||
|  |   gradeFilterBooks: state.book.gradeFilterBooks, | ||||||
|  |   selectedGrade: state.book.selectedGrade, | ||||||
|  | }); | ||||||
| 
 | 
 | ||||||
| const mapDispatchToProps = {}; | const mapDispatchToProps = { | ||||||
|  |   getList: book.list, | ||||||
|  |   gradeFilter: book.gradeFilter, | ||||||
|  |   setHeaderOptions: publicApi.setHeaderOptions, | ||||||
|  | }; | ||||||
| 
 | 
 | ||||||
| export default connect(mapStateToProps, mapDispatchToProps)(Main); | export default connect(mapStateToProps, mapDispatchToProps)(Main); | ||||||
|  | |||||||