|
|
import React, { Component } from "react"; |
|
|
import FilterListIcon from "@material-ui/icons/FilterList"; |
|
|
|
|
|
import Navbar from "../Home/Navbar/index"; |
|
|
import Footer from "../Home/Footer/index"; |
|
|
import Select from "./Select/index"; |
|
|
import Product from "./Product/index"; |
|
|
import Breadcrumbs from "./BreadCrumb/index"; |
|
|
import List from "./List/index"; |
|
|
import Sort from "./Sort/index"; |
|
|
import Filters from "./Filters/index"; |
|
|
|
|
|
import book1 from "../../assets/images/book1.png"; |
|
|
import book2 from "../../assets/images/book2.png"; |
|
|
import book3 from "../../assets/images/book3.png"; |
|
|
import book4 from "../../assets/images/book4.png"; |
|
|
import book5 from "../../assets/images/book5.png"; |
|
|
|
|
|
|
|
|
import "./index.scss"; |
|
|
export default class Products extends Component { |
|
|
state = { |
|
|
selectedFilters : [], |
|
|
firstFilters: [ |
|
|
{ id: 0, value: "محبوب ترین" }, |
|
|
{ id: 1, value: "جدیدترین" }, |
|
|
{ id: 2, value: "ارزان ترین" }, |
|
|
], |
|
|
dateFilters: [ |
|
|
{ id: 0, value: "1400" }, |
|
|
{ id: 1, value: "`1399" }, |
|
|
{ id: 2, value: "1398" }, |
|
|
], |
|
|
degreeFilters: [ |
|
|
{ id: 0, value: "اول" }, |
|
|
{ id: 1, value: "دوم" }, |
|
|
{ id: 2, value: "سوم" }, |
|
|
], |
|
|
first: "", |
|
|
date: "", |
|
|
degree: "", |
|
|
}; |
|
|
|
|
|
render() { |
|
|
const { dateFilters, degreeFilters, firstFilters } = this.state; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
<> |
|
|
<div className="products d-flex flex-column"> |
|
|
<Navbar page={'products'} /> |
|
|
<Breadcrumbs /> |
|
|
<div className="products__body d-flex"> |
|
|
<Filters parent={this} /> |
|
|
<div className="products__body--left d-flex flex-column"> |
|
|
<Sort parent={this} /> |
|
|
<List parent={this} /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<Footer /> |
|
|
</> |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
<> |
|
|
<div className="mobile-products d-flex flex-column"> |
|
|
<Navbar page={'products'} /> |
|
|
<div className="mobile-products__filters d-flex"> |
|
|
<div className="d-flex"> |
|
|
<Select name="first" options={firstFilters} parent={this} /> |
|
|
<Select name="date" options={dateFilters} parent={this} /> |
|
|
<Select name="degree" options={degreeFilters} parent={this} /> |
|
|
</div> |
|
|
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> |
|
|
</div> |
|
|
<div className="mobile-products__list d-flex flex-wrap"> |
|
|
{this.props.products.map((item, i) => ( |
|
|
<Product product={item} key={i} id={i} /> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
</> |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
Products.defaultProps = { |
|
|
sortItems : [ |
|
|
'پربازدیدترین', |
|
|
'پرفروش ترین', |
|
|
'گرانترین', |
|
|
'ارزانترین', |
|
|
'جدیدترین', |
|
|
'بزودی', |
|
|
], |
|
|
subjects: [ |
|
|
'فیزیک', |
|
|
'زیست شناسی', |
|
|
'شیمی آلی', |
|
|
'روانشناسی', |
|
|
'علوم تجربی', |
|
|
'دین و زندگی', |
|
|
], |
|
|
levels : [ |
|
|
'اول', |
|
|
'دوم', |
|
|
'سوم', |
|
|
'چهارم', |
|
|
], |
|
|
products: [ |
|
|
{ |
|
|
id: 0, |
|
|
image: book1, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "78.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 1, |
|
|
image: book2, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "39.000", |
|
|
oldPrice: "59.000", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
image: book3, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "21.000", |
|
|
oldPrice: "", |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
image: book4, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "", |
|
|
oldPrice: "", |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
image: book5, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه هفتم ابتدایی", |
|
|
price: "59.000", |
|
|
oldPrice: "", |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
image: book1, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "78.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
image: book2, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "39.000", |
|
|
oldPrice: "59.000", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
image: book3, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "21.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
image: book4, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
image: book5, |
|
|
title: "کتاب علوم تجربی", |
|
|
subTitle: "پایه هفتم ابتدایی", |
|
|
price: "59.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
status: { |
|
|
digital: true, |
|
|
ar: true, |
|
|
}, |
|
|
}, |
|
|
], |
|
|
};
|
|
|
|