+
+
{title}
-
+
{moreText}
-
+
{data.map((item, i) => (
))}
diff --git a/src/views/Home/HomeScroll/index.scss b/src/views/Home/HomeScroll/index.scss
index 0937597..fb7c49c 100644
--- a/src/views/Home/HomeScroll/index.scss
+++ b/src/views/Home/HomeScroll/index.scss
@@ -1,4 +1,59 @@
.home-scroll {
+ margin: 20px 0px;
+ width: 100%;
+ &__header{
+ height : 50px;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ padding : 0px 6px;
+ &--right{
+ position: relative;
+ h1{
+ font-size: calc(100vw / 60);
+ font-family: numeralBold;
+ letter-spacing: -1px;
+ }
+ span{
+ position: absolute;
+ width: 40%;
+ height: 3px;
+ border-radius: 10px;
+ background-color: #7dc241;
+ bottom : 0px;
+ right: 0px;
+ }
+ }
+
+ &--more{
+ span{
+ font-size: calc(100vw / 75);
+ color: #7dc241;
+ font-family: numeralMedium;
+ }
+ img{
+ width: 15px;
+ height: 12px;
+ transform: rotate(90deg);
+ }
+ margin-bottom: 5px;
+ align-items: center;
+ }
+ }
+ &__list{
+ height : 100%;
+ width : 100%;
+ overflow-x: scroll;
+ transform : translateX(0px);
+ a{
+ margin: 0px 6px;
+ }
+ }
+
+}
+
+
+.mobile-home-scroll {
margin: 20px 0px;
width: 100%;
&__header{
@@ -50,4 +105,4 @@
}
}
-}
+}
\ No newline at end of file
diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js
index f1330e7..9960e85 100644
--- a/src/views/Home/HomeSlider/index.js
+++ b/src/views/Home/HomeSlider/index.js
@@ -4,37 +4,69 @@ import Simple from "./Simple/index";
import Header from "./Header/index";
import Blog from "./Blog/index";
-import dropdown from '../../../assets/icons/dropdown.png';
+import dropdown from "../../../assets/icons/dropdown.png";
import "./index.scss";
const SimpleHeader = (props) => {
return (
-
-
-
{props.title}
-
-
-
-
ادامه لیست
-
-
-
+ <>
+ {window.innerWidth > 1000 ? (
+
+
+
{props.title}
+
+
+
+
ادامه لیست
+
+
+
+ ) : null}
+ {window.innerWidth < 1000 ? (
+
+
+
{props.title}
+
+
+
+
ادامه لیست
+
+
+
+ ) : null}
+ >
);
};
const TabHeader = (props) => {
return (
-
-
-
{props.title}
-
-
-
-
ادامه لیست
-
-
-
+ <>
+ {window.innerWidth > 1000 ? (
+
+
+
{props.title}
+
+
+
+
ادامه لیست
+
+
+
+ ) : null}
+ {window.innerWidth < 1000 ? (
+
+
+
{props.title}
+
+
+
+
ادامه لیست
+
+
+
+ ) : null}
+ >
);
};
@@ -51,8 +83,7 @@ export default class HomeSlider extends Component {
}
return (
<>
- {
- window.innerWidth > 1000 ?
+ {window.innerWidth > 1000 ? (
{data.map((item, i) => (
-
+
))}
-
: null
- }
- {
- window.innerWidth < 1000 ?
+
+ ) : null}
+ {window.innerWidth < 1000 ? (
{header}
-
{data.map((item, i) => (
-
+
))}
-
: null
- }
-
+
+ ) : null}
>
-
);
}
}
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
new file mode 100644
index 0000000..8d2e4c0
--- /dev/null
+++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import HomeIcon from '@material-ui/icons/Home';
+import CloseIcon from '@material-ui/icons/Close';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import SettingsIcon from '@material-ui/icons/Settings';
+import UpdateIcon from '@material-ui/icons/Update';
+import ReportIcon from '@material-ui/icons/Report';
+import ShareIcon from '@material-ui/icons/Share';
+// import { logout } from '../../../../Redux/actions/user';
+// import { connect } from 'react-redux';
+
+import './NavbarDrawer.scss';
+class NavbarDrawer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ links: [
+ {
+ name: 'صفحه اصلی',
+ link: '/',
+ icon:
,
+ toast: '',
+ },
+ {
+ name: 'تنظیمات',
+ link: '/',
+ icon:
,
+ toast: '',
+ },
+ {
+ name: 'به روز رسانی',
+ link: '/',
+ icon:
,
+ toast: '',
+ },
+ {
+ name: 'همرسانی',
+ link: '/',
+ icon:
,
+ toast: '',
+ },
+ {
+ name: 'گزارش ایراد',
+ link: '/',
+ icon:
,
+ toast: '',
+ },
+ {
+ name: 'خروج',
+ link: '/',
+ icon:
,
+ toast: '',
+ onClick: this.props.logout,
+ },
+ ],
+ };
+ }
+
+ render() {
+ return (
+
+
+
+
رضا
+
منوی دسترسی سریع
+
+
+
+
+ {this.state.links.map((item, key) => (
+
(item.link === '' ? toast.error(item.toast) : null))}
+ >
+
+ {item.icon}
+
{item.name}
+ {item.badge &&
{item.badge}
}
+
+
+ ))}
+
+ {/*
+ نسخه نرمافزار 3.1
+
*/}
+
+
+ );
+ }
+}
+
+export default NavbarDrawer;
+// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer);
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
new file mode 100644
index 0000000..236fafb
--- /dev/null
+++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
@@ -0,0 +1,99 @@
+.MuiDrawer-paperAnchorRight {
+ background: linear-gradient(180deg, #00cba2 16.9%, #ffffff 17%) !important;
+ &::-webkit-scrollbar {
+ display: none;
+ width: 0px;
+ }
+}
+.navbar-drawer {
+ font-family: numeralLight;
+ // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
+ text-align: right !important;
+ direction: rtl;
+ padding: 30px 10px 10px 10px;
+ &__header {
+ height: 60px;
+ background-color: #00cba2;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0px 8px;
+ &--right {
+ & h1 {
+ margin-bottom: 0px;
+ font-size: 24px;
+ color: white;
+ letter-spacing: -1px;
+ }
+ & div {
+ color: white;
+ font-size: 12px;
+ letter-spacing: -1px;
+ }
+ }
+ & img {
+ width: 22px;
+ height: 22px;
+ position: relative;
+ bottom: 35px;
+ }
+ }
+ &__bottom {
+ width: 100%;
+ margin-top: 50px !important;
+ &--link {
+ width: 100%;
+ align-items: center;
+ padding: 15px 10px;
+ & img {
+ width: 20px;
+ height: 20px;
+ margin-left: 20px;
+ }
+ & .badge {
+ background-color: rgb(160, 60, 209);
+ margin: 5px;
+ }
+ }
+ &--button {
+ width: 100%;
+ height: 100px;
+ color: white;
+ padding: 15px 10px;
+ cursor: pointer;
+ & img {
+ width: 20px;
+ height: 20px;
+ margin-left: 20px;
+ }
+ }
+ &--version {
+ position: absolute;
+ bottom: 5px;
+ left: 0px;
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ justify-content: center;
+ align-items: center;
+ & span {
+ color: #cfcfcf;
+ font-size: 14px;
+ }
+ }
+ }
+}
+
+.navbar-drawer__bottom a {
+ width: 100%;
+ height: 100px;
+ color: #666;
+ text-decoration: none;
+}
+.navbar-drawer__bottom a:hover {
+ color: #666;
+}
+
+.navbar-drawer__bottom--link .navbar-drawer__bottom--link div {
+ font-size: 16px;
+}
diff --git a/src/views/Home/Navbar/Mobile/index.js b/src/views/Home/Navbar/Mobile/index.js
index 9fe86ae..2d97ef2 100644
--- a/src/views/Home/Navbar/Mobile/index.js
+++ b/src/views/Home/Navbar/Mobile/index.js
@@ -1,28 +1,91 @@
-import React, { Component } from "react";
+import React, { useState, Component } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { SwipeableDrawer } from "@material-ui/core";
+import NavbarDrawer from "./NavbarDrawer/NavbarDrawer.js";
+import clsx from "clsx";
-import logo from '../../../../assets/icons/logoMobile.png';
-import hamburger from '../../../../assets/icons/hamburger.png';
-import ar from '../../../../assets/icons/ar.png';
-import qr from '../../../../assets/icons/qr.png';
-import search from '../../../../assets/icons/navbarSearch.png';
+import logo from "../../../../assets/icons/logoMobile.png";
+import hamburger from "../../../../assets/icons/hamburger.png";
+import ar from "../../../../assets/icons/ar.png";
+import qr from "../../../../assets/icons/qr.png";
+import search from "../../../../assets/icons/navbarSearch.png";
import "./index.scss";
-export default class MobileNavbar extends Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
- );
- }
+
+const useStyles = makeStyles({
+ list: {
+ width: window.innerWidth * 0.8,
+ },
+ fullList: {
+ width: "auto",
+ direction: "rtl",
+ textAlign: "right",
+ },
+});
+
+export default function MobileNavbar(props) {
+ const classes = useStyles();
+ const [state, setState] = useState({
+ top: false,
+ left: false,
+ bottom: false,
+ right: false,
+ searchFlag: false,
+ });
+
+ const toggleDrawer = (anchor, open) => (event) => {
+ if (
+ event &&
+ event.type === "keydown" &&
+ (event.key === "Tab" || event.key === "Shift")
+ ) {
+ return;
+ }
+
+ setState({ [anchor]: open });
+ };
+
+ const list = (props, anchor) => (
+
+
+
+ );
+ return (
+
+
+
+
+
+
+
+
+
+ {list(props, "right")}
+
+
+ );
}
diff --git a/src/views/Home/index.js b/src/views/Home/index.js
index 577d28a..3b15886 100644
--- a/src/views/Home/index.js
+++ b/src/views/Home/index.js
@@ -182,7 +182,7 @@ export default class Home extends Component {
],
},
{
- type: 'scroll',
+ type: window.innerWidth < 1000 ? 'scroll' : '',
title : 'موضوعات',
moreText: 'تمام موضوعات',
design: 'subjects',
@@ -485,11 +485,8 @@ export default class Home extends Component {
))}
-
> : null
}
-
-
>
);
}
diff --git a/src/views/Product/Comment/index.js b/src/views/Product/Comment/index.js
new file mode 100644
index 0000000..f7bfbdd
--- /dev/null
+++ b/src/views/Product/Comment/index.js
@@ -0,0 +1,14 @@
+import React from "react";
+import moment from "jalali-moment";
+
+import "./index.scss";
+export default function Comment(props) {
+ const { comment } = props;
+ return (
+
+
{comment.username}
+
{comment.text}
+
{moment(comment.date).format('YYYY/MM/DD')}
+
+ );
+}
diff --git a/src/views/Product/Comment/index.scss b/src/views/Product/Comment/index.scss
new file mode 100644
index 0000000..54af58f
--- /dev/null
+++ b/src/views/Product/Comment/index.scss
@@ -0,0 +1,29 @@
+.mobile-comment{
+ padding : 30px 20px 20px;
+ border-radius: 10px;
+ background-color: #fffac9;
+ margin-left: 10px;
+ min-width: calc(100vw / 1.7);
+ max-width: 200px;
+ color: #72891edc;
+ position: relative;
+ p{
+ text-align: justify;
+ font-family: numeralLight;
+ font-size: calc(100vw / 30);
+ }
+ strong{
+ font-family: numeralMedium;
+ margin-bottom: 5px;
+ font-size: calc(100vw / 25);
+ }
+
+ span{
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ font-family: numeralLight;
+ font-size: calc(100vw / 30);
+
+ }
+}
\ No newline at end of file
diff --git a/src/views/Product/index.js b/src/views/Product/index.js
new file mode 100644
index 0000000..d2087dc
--- /dev/null
+++ b/src/views/Product/index.js
@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+
+import Footer from "../Home/Footer/index";
+import Navbar from "../Home/Navbar/index";
+import Comment from './Comment/index';
+
+import book2 from "../../assets/images/book2.png";
+
+import './index.scss';
+export default class Product extends Component {
+ render() {
+ const {product} = this.props;
+ return (
+ <>
+ {window.innerWidth > 1000 ? (
+ <>
+
+
+
+
+
+ >
+ ) : null}
+ {window.innerWidth < 1000 ? (
+ <>
+
+
+
+
+
خلاصه کتاب
+
{product.abstraction}
+
+
+
این کتاب شامل چه مواردی است؟
+
+ {product.modules.map((item, i) => (
+
+
+
+ ))}
+
+
+
+
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
+
+ {product.tips.map((item, i) => (
+
+
+
+ ))}
+
+
+
+
{product.description}
+
+
+
نظرات خریداران
+
+ {
+ product.comments.map((item,i) => (
+
+ ))
+ }
+
+
+
+ >
+ ) : null}
+ >
+ );
+ }
+}
+
+Product.defaultProps = {
+ product: {
+ id: 1,
+ image: book2,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه ششم ابتدایی",
+ price: "39.000",
+ oldPrice: "59.000",
+ date: new Date(),
+ abstraction: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+ modules: [
+ 'پک هدیه شامل یک عدد جلد سخت',
+ 'عینک واقعیت مجازی',
+ 'کارت گرافیک مناسب جهت اجرای بازی',
+ ],
+ tips: [
+ 'پک هدیه شامل یک عدد جلد سخت',
+ 'عینک واقعیت مجازی',
+ 'کارت گرافیک مناسب جهت اجرای بازی',
+ ],
+ description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+ comments: [
+ {id: 0, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 4},
+ {id: 1, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2.5},
+ {id: 2, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 5},
+ {id: 3, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 3.7},
+ {id: 4, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2},
+ ]
+ },
+};
+
+
+const Item = (props) => {
+ return(
+
+ {props.item}
+ );
+}
\ No newline at end of file
diff --git a/src/views/Product/index.scss b/src/views/Product/index.scss
new file mode 100644
index 0000000..de75cde
--- /dev/null
+++ b/src/views/Product/index.scss
@@ -0,0 +1,142 @@
+.mobile-product{
+ width: 100vw;
+ max-width: 1250px;
+ margin: 0px auto;
+ padding : 0px 10px 40px;
+ direction: rtl;
+ padding-top: 90px;
+ overflow-x: hidden;
+ &__header{
+ width: 100%;
+ img{
+ height: calc(100vh / 2.7);
+ }
+ h1{
+ margin-top: 10px;
+ font-family: numeralBold;
+ font-size: calc(100vw / 20);
+ color: #7dc241;
+ letter-spacing: -1px;
+ }
+ h2{
+ font-family: numeralMedium;
+ font-size: calc(100vw / 28);
+ color: #6f7074;
+ }
+ button{
+ border: 0px;
+ font-family: numeralMedium;
+ font-size: calc(100vw / 25);
+ padding: 15px 0px;
+ width: 150px;
+ letter-spacing: -1px;
+ }
+ &--purchase{
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ background-color: #00cc69;
+ color: white;
+ }
+ &--sampleButton{
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ background-color: #efefef;
+ color: #6f7074;
+ }
+ }
+ &__abstraction{
+ margin-top: 30px;
+ width: 100%;
+ h1{
+ font-family: numeralBold;
+ font-size: calc(100vw / 22);
+ color: #6f7074;
+ letter-spacing: -1px;
+ }
+ p{
+ font-family: numeralLight;
+ font-size: calc(100vw / 30);
+ color: #6f7074;
+ letter-spacing: -1px;
+ text-align: justify;
+ }
+ }
+ &__modules{
+ margin-top: 20px;
+ width: 100%;
+ padding: 20px 10px;
+ background-color: #baffdc2f;
+ border-radius: 10px;
+ h1{
+ font-family: numeralBold;
+ font-size: calc(100vw / 28);
+ color: #02733c;
+ letter-spacing: -1px;
+ }
+ ul{
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+ margin-top: 10px;
+ li{
+ font-family: numeralLight;
+ font-size: calc(100vw / 28);
+ color: #02733c;
+ letter-spacing: -1px;
+ }
+ }
+ }
+ &__tips{
+ margin-top: 20px;
+ width: 100%;
+ padding: 20px 10px;
+ background-color: #1f6fb528;
+ border-radius: 10px;
+ h1{
+ font-family: numeralBold;
+ font-size: calc(100vw / 28);
+ color: #074f8b;
+ letter-spacing: -1px;
+ }
+ ul{
+ list-style: none;
+ padding: 0px;
+ margin: 0px;
+ margin-top: 10px;
+ li{
+ font-family: numeralLight;
+ font-size: calc(100vw / 30);
+ color: #074f8b;
+ letter-spacing: -1px;
+ margin-bottom: 3px;
+ }
+ }
+ }
+ &__description{
+ width: 100%;
+ margin-top: 20px;
+ p{
+ font-family: numeralLight;
+ font-size: calc(100vw / 30);
+ color: #6f7074;
+ letter-spacing: -1px;
+ text-align: justify;
+ }
+ }
+ &__comments{
+ max-width: 100%;
+ margin-top: 30px;
+ h1{
+ font-family: numeralBold;
+ font-size: calc(100vw / 22);
+ color: #6f7074;
+ letter-spacing: -1px;
+ margin-bottom: 30px;
+ }
+ &--list{
+ width: 100vw;
+ overflow-x: scroll !important;
+ transform: translateX(10px);
+ }
+ }
+}
diff --git a/src/views/Products/Product/index.js b/src/views/Products/Product/index.js
new file mode 100644
index 0000000..7168679
--- /dev/null
+++ b/src/views/Products/Product/index.js
@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+
+import './index.scss';
+export default class Product extends Component {
+ render() {
+ const { product } = this.props;
+ return (
+
+
+
+ {product.title}
+ {product.subTitle}
+ {product.price ? (
+
+ {product.oldPrice ? (
+
+
+ {product.oldPrice} تومان
+
+
+
+ ) : null}
+
+ {product.price} تومان
+
+
+ ) : (
+ ناموجود
+ )}
+
+
+ );
+ }
+}
diff --git a/src/views/Products/Product/index.scss b/src/views/Products/Product/index.scss
new file mode 100644
index 0000000..51a68a1
--- /dev/null
+++ b/src/views/Products/Product/index.scss
@@ -0,0 +1,64 @@
+.mobile-products-product{
+ width: calc(100% / 3);
+ padding: 10px;
+ a{
+ width : 100%;
+ text-decoration: none;
+ &:hover{
+ }
+ img{
+ width: 100%;
+ height: 170px;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ }
+ h1{
+ font-family: numeralBold;
+ margin-top: 15px;
+ font-size: calc(100vw / 26);
+ color: #7dc241;
+ letter-spacing: -1px;
+ }
+ h2{
+ font-family: numeralLight;
+ margin-top: 10px;
+ font-size: calc(100vw / 32);
+ color: #6f7074;
+ }
+ }
+ &__notAvailabe{
+ font-family: numeralBold;
+ font-size: calc(100vw / 46);
+ width : 100%;
+ text-align: center;
+ color: #6f7074;
+ margin-top: 15px;
+ }
+ &__price{
+ font-size: calc(100vw / 46);
+ width : 100%;
+ margin-top: 15px;
+ text-align: center;
+ &--old{
+ font-family: numeralBold;
+ color: #6f7074;
+ position: relative;
+ margin-left: 10px;
+ align-items:center;
+ font-size: calc(100vw / 46);
+ span{
+ position: absolute;
+ left: 0px;
+ width : 100%;
+ height: 2px;
+ background-color: rgba(121, 121, 121, 0.534);
+ transform: rotate(-14deg);
+ }
+ }
+ &--price{
+ color: #02733c;
+ font-family: numeralBold;
+ font-size: calc(100vw / 46);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Products/Select/index.js b/src/views/Products/Select/index.js
new file mode 100644
index 0000000..407c77e
--- /dev/null
+++ b/src/views/Products/Select/index.js
@@ -0,0 +1,74 @@
+import React from "react";
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import NativeSelect from "@material-ui/core/NativeSelect";
+import InputBase from "@material-ui/core/InputBase";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+
+const BootstrapInput = withStyles((theme) => ({
+ root: {
+ "label + &": {
+ marginTop: theme.spacing(3),
+ },
+ },
+ input: {
+ borderRadius: 4,
+ position: "relative",
+ backgroundColor: theme.palette.background.paper,
+ border: "1px solid #a5a5a5",
+ fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
+ color: "#a5a5a5",
+ // maxWidth : 70,
+ minWidth: window.innerWidth > 420 ? 100 : 80,
+ height: "35px",
+ padding: "5px",
+ transition: theme.transitions.create(["border-color", "box-shadow"]),
+ // Use the system font instead of the default Roboto font.
+ fontFamily: "numeralLight",
+ "&:focus": {
+ borderRadius: 4,
+ },
+ },
+}))(InputBase);
+
+const useStyles = makeStyles((theme) => ({
+ marginLeft: {
+ // margin: theme.spacing(1),
+ marginLeft: 8,
+ },
+}));
+
+export default function CustomizedSelects(props) {
+ const classes = useStyles();
+
+ console.log(props);
+ return (
+
+
+
+ props.parent.setState({ [props.name]: e.target.value })
+ }
+ input={ }
+ >
+ {props.options.map((item) => (
+
+ {item.value}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
new file mode 100644
index 0000000..baf53b0
--- /dev/null
+++ b/src/views/Products/index.js
@@ -0,0 +1,165 @@
+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 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 = {
+ 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 ? (
+ <>
+
+
+
+
+ >
+ ) : null}
+ {window.innerWidth < 1000 ? (
+ <>
+
+
+
+
+ {this.props.products.map((item, i) => (
+
+ ))}
+
+
+ >
+ ) : null}
+ >
+ );
+ }
+}
+
+Products.defaultProps = {
+ products: [
+ {
+ id: 0,
+ image: book1,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه دهم ابتدایی",
+ price: "78.000",
+ oldPrice: "",
+ date: new Date(),
+ },
+ {
+ id: 1,
+ image: book2,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه ششم ابتدایی",
+ price: "39.000",
+ oldPrice: "59.000",
+ date: new Date(),
+ },
+ {
+ id: 2,
+ image: book3,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه ششم ابتدایی",
+ price: "21.000",
+ oldPrice: "",
+ },
+ {
+ id: 3,
+ image: book4,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه دهم ابتدایی",
+ price: "",
+ oldPrice: "",
+ },
+ {
+ id: 4,
+ image: book5,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه هفتم ابتدایی",
+ price: "59.000",
+ oldPrice: "",
+ },
+ {
+ id: 5,
+ image: book1,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه دهم ابتدایی",
+ price: "78.000",
+ oldPrice: "",
+ date: new Date(),
+ },
+ {
+ id: 6,
+ image: book2,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه ششم ابتدایی",
+ price: "39.000",
+ oldPrice: "59.000",
+ date: new Date(),
+ },
+ {
+ id: 7,
+ image: book3,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه ششم ابتدایی",
+ price: "21.000",
+ oldPrice: "",
+ date: new Date(),
+ },
+ {
+ id: 8,
+ image: book4,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه دهم ابتدایی",
+ price: "",
+ oldPrice: "",
+ date: new Date(),
+ },
+ {
+ id: 9,
+ image: book5,
+ title: "منفجر کردن مغز خود را به ما بسپارید",
+ subTitle: "پایه هفتم ابتدایی",
+ price: "59.000",
+ oldPrice: "",
+ date: new Date(),
+ },
+ ],
+};
diff --git a/src/views/Products/index.scss b/src/views/Products/index.scss
new file mode 100644
index 0000000..533be9a
--- /dev/null
+++ b/src/views/Products/index.scss
@@ -0,0 +1,35 @@
+.products{
+ width: 100vw;
+ max-width: 1250px;
+ margin: 0px auto;
+ padding : 0px 10px;
+ direction: rtl;
+}
+
+
+.mobile-products{
+ width: 100vw;
+ max-width: 600px;
+ margin: 0px auto;
+ padding: 0px;
+ direction: rtl;
+ overflow-x: hidden;
+ padding-top: 90px;
+ &__filters{
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ padding : 0px 10px;
+ .MuiNativeSelect-icon{
+ display: none;
+ }
+ .MuiNativeSelect-select.MuiNativeSelect-select{
+ padding-right: 5px !important;
+ padding-left: 20px;
+ }
+ }
+ &__list{
+ width : 100%;
+ padding: 10px 0px;
+ }
+}
\ No newline at end of file