Reza_ashrafi
3 years ago
commit
156ab159e0
20 changed files with 17617 additions and 8 deletions
File diff suppressed because it is too large
Load Diff
|
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); |
||||||
|
|||||||
Loading…
Reference in new issue