You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

241 lines
5.8 KiB

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,
},
},
],
};