| 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 { Link } from "react-router-dom"; | ||||
| import filterIcon from '../../../assets/images/vuesax-linear-filter-tick.svg'; | ||||
| 
 | ||||
| export const Main = ({}) => { | ||||
|   return <div className="flex flex-col w-3/4 p-4 bg-green-300"> | ||||
| import Product from '../../../components/Product' | ||||
| 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>; | ||||
| }; | ||||
| 
 | ||||
| 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); | ||||
|  | ||||