parent
11746080bd
commit
911dea17c0
18 changed files with 1105 additions and 70 deletions
@ -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; |
||||||
|
} |
||||||
@ -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 ( |
||||||
|
<div className="mobile-comment d-flex flex-column"> |
||||||
|
<strong>{comment.username}</strong> |
||||||
|
<p>{comment.text}</p> |
||||||
|
<span>{moment(comment.date).format('YYYY/MM/DD')}</span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -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); |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -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 ? ( |
||||||
|
<> |
||||||
|
<div className="product d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
|
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-product d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<header className="mobile-product__header d-flex flex-column align-items-center"> |
||||||
|
<img src={product.image} alt={product.title} /> |
||||||
|
<h1>{product.title}</h1> |
||||||
|
<h2>{product.subTitle}</h2> |
||||||
|
<div className="d-flex mt-3"> |
||||||
|
<button className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</button> |
||||||
|
<button className="mobile-product__header--purchase">خرید کتاب</button> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div className="mobile-product__abstraction d-flex flex-column"> |
||||||
|
<h1>خلاصه کتاب</h1> |
||||||
|
<p>{product.abstraction}</p> |
||||||
|
</div> |
||||||
|
<div className="mobile-product__modules d-flex flex-column"> |
||||||
|
<h1>این کتاب شامل چه مواردی است؟</h1> |
||||||
|
<ul> |
||||||
|
{product.modules.map((item, i) => ( |
||||||
|
<React.Fragment key={i}> |
||||||
|
<Item item={item} /> |
||||||
|
</React.Fragment> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div className="mobile-product__tips d-flex flex-column"> |
||||||
|
<h1>نکاتی که هنگام خرید باید به آن توجه داشته باشید؟</h1> |
||||||
|
<ul> |
||||||
|
{product.tips.map((item, i) => ( |
||||||
|
<React.Fragment key={i}> |
||||||
|
<Item item={item} /> |
||||||
|
</React.Fragment> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div className="mobile-product__description d-flex"> |
||||||
|
<p>{product.description}</p> |
||||||
|
</div> |
||||||
|
<div className="mobile-product__comments d-flex flex-column"> |
||||||
|
<h1>نظرات خریداران</h1> |
||||||
|
<div className="mobile-product__comments--list d-flex"> |
||||||
|
{ |
||||||
|
product.comments.map((item,i) => ( |
||||||
|
<Comment comment={item} key={i} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : 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( |
||||||
|
<li>+ {props.item}</li> |
||||||
|
); |
||||||
|
} |
||||||
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -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 ( |
||||||
|
<article className="mobile-products-product d-flex flex-column"> |
||||||
|
<Link to={`/products/${product.id}`}> |
||||||
|
<img src={product.image} alt={product.title} /> |
||||||
|
<h1>{product.title}</h1> |
||||||
|
<h2>{product.subTitle}</h2> |
||||||
|
{product.price ? ( |
||||||
|
<div className="mobile-products-product__price d-flex justify-content-center"> |
||||||
|
{product.oldPrice ? ( |
||||||
|
<div> |
||||||
|
<div className="mobile-products-product__price--old d-flex"> |
||||||
|
{product.oldPrice} تومان |
||||||
|
<span></span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
<div className="mobile-products-product__price--price"> |
||||||
|
{product.price} تومان |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="mobile-products-product__notAvailabe">ناموجود</div> |
||||||
|
)} |
||||||
|
</Link> |
||||||
|
</article> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -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 ( |
||||||
|
<div style={{ position: "relative" }}> |
||||||
|
<FormControl className={classes.marginLeft}> |
||||||
|
<NativeSelect |
||||||
|
id="demo-customized-select-native" |
||||||
|
value={props.parent.state[props.name]} |
||||||
|
onChange={(e) => |
||||||
|
props.parent.setState({ [props.name]: e.target.value }) |
||||||
|
} |
||||||
|
input={<BootstrapInput />} |
||||||
|
> |
||||||
|
{props.options.map((item) => ( |
||||||
|
<option key={item.id} value={item.value}> |
||||||
|
{item.value} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</NativeSelect> |
||||||
|
</FormControl> |
||||||
|
<KeyboardArrowDownIcon |
||||||
|
style={{ |
||||||
|
position: "absolute", |
||||||
|
left: 5, |
||||||
|
top: 6, |
||||||
|
fontSize: 25, |
||||||
|
color: "#a5a5a5", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -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 ? ( |
||||||
|
<> |
||||||
|
<div className="products d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
</div> |
||||||
|
<Footer /> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<> |
||||||
|
<div className="mobile-products d-flex flex-column"> |
||||||
|
<Navbar /> |
||||||
|
<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} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : 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(), |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue