parent
d24d71315a
commit
141282cd24
30 changed files with 2470 additions and 1117 deletions
@ -1,7 +1,33 @@ |
||||
import React, { Component } from "react"; |
||||
import {ToastContainer} from "react-toastify"; |
||||
|
||||
import Profile from "./Profile/Profile"; |
||||
import Login from "./Login/Login"; |
||||
|
||||
import "./Auth.scss"; |
||||
export default class Auth extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
page: "login", |
||||
}; |
||||
} |
||||
render() { |
||||
return <div className="auth"></div>; |
||||
return ( |
||||
<div className="auth d-flex"> |
||||
{this.state.page === "login" ? <Login /> : <Profile />} |
||||
<ToastContainer |
||||
position="bottom-right" |
||||
autoClose={1500} |
||||
hideProgressBar={true} |
||||
newestOnTop={true} |
||||
closeOnClick |
||||
rtl={true} |
||||
pauseOnFocusLoss |
||||
draggable |
||||
pauseOnHover |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,6 @@ |
||||
.auth{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
overflow-x: hidden; |
||||
background-color: grey; |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import './Cellphone.scss'; |
||||
export default class Cellphone extends Component { |
||||
componentDidMount() { |
||||
this.inputRef1.focus(); |
||||
} |
||||
render() { |
||||
return ( |
||||
<div className="auth-cellphone d-flex"> |
||||
<form |
||||
onSubmit={() => |
||||
this.props.parent.setState({ |
||||
page: 1, |
||||
cellphone: "09" + this.state.cellphone, |
||||
}) |
||||
} |
||||
> |
||||
<label htmlFor="cellphone"> |
||||
شماره همراه |
||||
<input |
||||
id="cellphone" |
||||
type="text" |
||||
maxLength={9} |
||||
inputMode="numeric" |
||||
autoComplete="off" |
||||
ref={(input) => { |
||||
this.inputRef1 = input; |
||||
}} |
||||
onChange={(e) => this.setState({ cellphone: e.target.value })} |
||||
onInput={(e) => |
||||
(e.target.value = e.target.value |
||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||
return c.charCodeAt(0) & 0xf; |
||||
}) |
||||
.replace(/[^\d]/, "")) |
||||
} |
||||
/> |
||||
</label> |
||||
</form> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
.auth-cellphone{ |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content:center; |
||||
align-items:center; |
||||
label{ |
||||
text-align:right; |
||||
display: flex; |
||||
flex-direction:column; |
||||
color: white; |
||||
input{ |
||||
background-color: inherit; |
||||
border : 0px; |
||||
border-bottom: 2px solid white; |
||||
font-size: 24px; |
||||
color : white; |
||||
direction : ltr; |
||||
text-align:center; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,151 @@ |
||||
import React, { Component } from "react"; |
||||
import Timer from '../Timer/Timer'; |
||||
|
||||
import "./Code.scss"; |
||||
export default class Code extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
resendStatus: false, |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.inputRef1.focus(); |
||||
} |
||||
|
||||
onInput = (e) => { |
||||
e.target.value = e.target.value |
||||
.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) { |
||||
return c.charCodeAt(0) & 0xf; |
||||
}) |
||||
.replace(/[^\d]/, "") |
||||
.slice(-1); |
||||
}; |
||||
|
||||
changeValue = (e) => { |
||||
if (e.target.value.match("^[0-9]{1}$")) { |
||||
if (e.target.name === "o1") { |
||||
this.setState({ o1: e.target.value }); |
||||
this.inputRef2.focus(); |
||||
} else if (e.target.name === "o2") { |
||||
this.setState({ o2: e.target.value }); |
||||
this.inputRef3.focus(); |
||||
} else if (e.target.name === "o3") { |
||||
this.setState({ o3: e.target.value }); |
||||
this.inputRef4.focus(); |
||||
} else if (e.target.name === "o4") { |
||||
this.setState({ o4: e.target.value }); |
||||
const o4 = e.target.value; |
||||
const { o1, o2, o3 } = this.state; |
||||
this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` }); |
||||
return; |
||||
} |
||||
} else { |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
keyboardEvent = (e) => { |
||||
if (e.keyCode === 8) { |
||||
this.setState({ |
||||
[e.target.name]: "", |
||||
}); |
||||
if (e.target.name === "o1") { |
||||
return; |
||||
} else if (e.target.name === "o2") { |
||||
this.inputRef1.focus(); |
||||
return; |
||||
} else if (e.target.name === "o3") { |
||||
this.inputRef2.focus(); |
||||
return; |
||||
} else if (e.target.name === "o4") { |
||||
this.inputRef3.focus(); |
||||
return; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="auth-code d-flex"> |
||||
<label htmlFor="code1"> |
||||
<input |
||||
id="code1" |
||||
name="o1" |
||||
type="text" |
||||
inputMode="numeric" |
||||
maxLength="2" |
||||
ref={(input) => { |
||||
this.inputRef1 = input; |
||||
}} |
||||
autoComplete="off" |
||||
value={this.state.o1} |
||||
onKeyDown={(e) => this.keyboardEvent(e)} |
||||
onInput={this.onInput} |
||||
onChange={(e) => this.changeValue(e)} |
||||
/> |
||||
</label> |
||||
<label htmlFor="code2"> |
||||
<input |
||||
id="o2" |
||||
name="o2" |
||||
type="text" |
||||
inputMode="numeric" |
||||
maxLength="2" |
||||
ref={(input) => { |
||||
this.inputRef2 = input; |
||||
}} |
||||
autoComplete="off" |
||||
value={this.state.o2} |
||||
onKeyDown={(e) => this.keyboardEvent(e)} |
||||
onInput={this.onInput} |
||||
onChange={(e) => this.changeValue(e)} |
||||
/> |
||||
</label> |
||||
<label htmlFor="code3"> |
||||
<input |
||||
id="code3" |
||||
name="o3" |
||||
type="text" |
||||
inputMode="numeric" |
||||
maxLength="2" |
||||
ref={(input) => { |
||||
this.inputRef3 = input; |
||||
}} |
||||
autoComplete="off" |
||||
value={this.state.o3} |
||||
onKeyDown={(e) => this.keyboardEvent(e)} |
||||
onInput={this.onInput} |
||||
onChange={(e) => this.changeValue(e)} |
||||
/> |
||||
</label> |
||||
<label htmlFor="code4"> |
||||
<input |
||||
id="code4" |
||||
name="o4" |
||||
type="text" |
||||
inputMode="numeric" |
||||
maxLength="2" |
||||
ref={(input) => { |
||||
this.inputRef4 = input; |
||||
}} |
||||
autoComplete="off" |
||||
value={this.state.o4} |
||||
onKeyDown={(e) => this.keyboardEvent(e)} |
||||
onInput={this.onInput} |
||||
onChange={(e) => this.changeValue(e)} |
||||
/> |
||||
</label> |
||||
{ |
||||
!this.state.resendStatus ? |
||||
<Timer seconds={10} parent={this} /> :
|
||||
<div style={{color : '#88ff88'}} className="timer d-flex" onClick={() => this.setState({ resendStatus : false })}>
|
||||
دریافت مجدد کد |
||||
</div> |
||||
} |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
.auth-code{ |
||||
width: 100%; |
||||
height: 100%; |
||||
justify-content:center; |
||||
align-items:center; |
||||
direction: ltr; |
||||
position: relative; |
||||
|
||||
input { |
||||
width: 50px; |
||||
background-color: inherit; |
||||
border : 0px; |
||||
border-bottom: 2px solid white; |
||||
margin : 0px 7px; |
||||
font-size: 24px; |
||||
color : white; |
||||
text-align: center; |
||||
direction : ltr; |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
import Cellphone from "./Cellphone/Cellphone"; |
||||
import Code from "./Code/Code"; |
||||
|
||||
export default class Login extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
page: 0, |
||||
}; |
||||
} |
||||
|
||||
async componentDidUpdate() { |
||||
const { cellphone, otp, section } = this.state; |
||||
// if (cellphone && !otp) this.props.otp({ cellphone });
|
||||
// if (section && cellphone && otp) this.props.login({ cellphone, otp });
|
||||
} |
||||
|
||||
resend = () => { |
||||
const {cellphone} = this.state; |
||||
this.props.otp({cellphone}); |
||||
} |
||||
|
||||
render() { |
||||
return <>{this.state.page === 0 ? <Cellphone parent={this} /> : <Code parent={this} />}</>; |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.timer{ |
||||
flex-direction: row; |
||||
direction: rtl !important; |
||||
margin-right: 10px; |
||||
position : absolute; |
||||
bottom: 40%; |
||||
color: white; |
||||
} |
||||
@ -0,0 +1,67 @@ |
||||
import { Component } from "react"; |
||||
import "./Timer.css"; |
||||
|
||||
export default class Timer extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { time: {}, seconds: this.props.seconds, flag: true }; |
||||
this.timer = 0; |
||||
this.startTimer = this.startTimer.bind(this); |
||||
this.countDown = this.countDown.bind(this); |
||||
} |
||||
|
||||
secondsToTime(secs) { |
||||
let hours = Math.floor(secs / (60 * 60)); |
||||
|
||||
let divisor_for_minutes = secs % (60 * 60); |
||||
let minutes = Math.floor(divisor_for_minutes / 60); |
||||
|
||||
let divisor_for_seconds = divisor_for_minutes % 60; |
||||
let seconds = Math.ceil(divisor_for_seconds); |
||||
|
||||
let obj = { |
||||
h: hours, |
||||
m: minutes, |
||||
s: seconds, |
||||
}; |
||||
return obj; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.startTimer(); |
||||
let timeLeftVar = this.secondsToTime(this.state.seconds); |
||||
this.setState({ time: timeLeftVar }); |
||||
} |
||||
|
||||
startTimer() { |
||||
if (this.timer === 0 && this.state.seconds > 0) { |
||||
this.timer = setInterval(this.countDown, 1000); |
||||
} |
||||
} |
||||
|
||||
countDown = async () => { |
||||
// Remove one second, set state so a re-render happens.
|
||||
let seconds = this.state.seconds - 1; |
||||
this.setState({ |
||||
time: this.secondsToTime(seconds), |
||||
seconds: seconds, |
||||
}); |
||||
if (seconds === 0) { |
||||
this.props.parent.setState({ resendStatus: true }); |
||||
} |
||||
}; |
||||
|
||||
componentWillUnmount() { |
||||
clearInterval(this.timer); |
||||
} |
||||
render() { |
||||
return ( |
||||
<div className="timer d-flex"> |
||||
<div className="ml-2">دریافت مجدد کد در</div> |
||||
<div>{this.state.time.s}</div>: |
||||
<div>{this.state.time.m + this.state.time.h * 60}</div> |
||||
<div className="mr-2">دیگر</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
export default class Profile extends Component { |
||||
render() { |
||||
return ( |
||||
<div className="auth-profile d-flex"> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -1,5 +1,5 @@ |
||||
.home{ |
||||
width: 100vw; |
||||
padding : 0px 5px; |
||||
padding : 0px 10px; |
||||
overflow-x: hidden; |
||||
} |
||||
@ -1,28 +1,53 @@ |
||||
import React, { Component } from "react"; |
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import "./HomeHeader.scss"; |
||||
export default class HomeHeader extends Component { |
||||
render() { |
||||
const { data } = this.props; |
||||
const { data, height, title } = this.props; |
||||
return ( |
||||
<section className="home-header d-flex"> |
||||
{data.map((item, i) => ( |
||||
<Item data={item} key={i} /> |
||||
))} |
||||
</section> |
||||
<header |
||||
className={ |
||||
height ? "home-header d-flex flex-column" : "home-header d-flex" |
||||
} |
||||
> |
||||
{ |
||||
title ? <div className="home-scroll__header d-flex"> |
||||
<h1>{title}</h1> |
||||
<div className="home-scroll__header--more d-flex"> |
||||
<span>موارد بیشتر</span> |
||||
<ChevronLeftIcon |
||||
style={{ width: 20, height: 20, color: "black", marginRight: 1 }} |
||||
/> |
||||
</div> |
||||
</div> : null |
||||
} |
||||
<div className="home-scroll__list d-flex"> |
||||
{data.map((item, i) => ( |
||||
<Item data={item} key={i} /> |
||||
))} |
||||
</div> |
||||
|
||||
</header> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
return ( |
||||
<img |
||||
src={props.data.image} |
||||
alt="عکس" |
||||
style={{ |
||||
width: `${100 / props.data.width}%`, |
||||
height: '100%', |
||||
}} |
||||
/> |
||||
<Link to={props.data.link} style={{ |
||||
width: `${props.data.width}%`, |
||||
height: "100%", |
||||
}}> |
||||
<img |
||||
src={props.data.image} |
||||
alt="عکس" |
||||
style={{ |
||||
width: `${props.data.width}%`, |
||||
height: "100%", |
||||
}} |
||||
/> |
||||
</Link> |
||||
); |
||||
}; |
||||
|
||||
@ -1,4 +1,9 @@ |
||||
.home-header{ |
||||
width: 100%; |
||||
height : 250px; |
||||
margin : 20px 0px; |
||||
&__list{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
@ -1,9 +1,28 @@ |
||||
.home-scroll { |
||||
margin-top: 20px; |
||||
width: 100vw; |
||||
height: 200px; |
||||
overflow-x: scroll; |
||||
img { |
||||
margin: 0px 5px; |
||||
margin: 20px 0px; |
||||
width: 100%; |
||||
&__header{ |
||||
height : 50px; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding : 0px 6px; |
||||
h1{ |
||||
font-size: 21px; |
||||
} |
||||
&--more{ |
||||
margin-bottom: 5px; |
||||
align-items: center; |
||||
} |
||||
} |
||||
&__list{ |
||||
height : 100%; |
||||
width : 100%; |
||||
overflow-x: scroll; |
||||
transform : translateX(0px); |
||||
a{ |
||||
margin: 0px 6px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
@ -0,0 +1,64 @@ |
||||
import React, { Component } from "react"; |
||||
import Carousel from "react-elastic-carousel"; |
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import "./HomeSlider.scss"; |
||||
export default class HomeSlider extends Component { |
||||
render() { |
||||
const { data, title, height } = this.props; |
||||
return ( |
||||
<div |
||||
className={ |
||||
title ? "home-slider d-flex flex-column" : "home-slider d-flex" |
||||
} |
||||
> |
||||
{title ? ( |
||||
<div className="home-scroll__header d-flex"> |
||||
<h1>{title}</h1> |
||||
<div className="home-scroll__header--more d-flex"> |
||||
<span>موارد بیشتر</span> |
||||
<ChevronLeftIcon |
||||
style={{ |
||||
width: 20, |
||||
height: 20, |
||||
color: "black", |
||||
marginRight: 1, |
||||
}} |
||||
/> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
|
||||
<Carousel |
||||
itemsToShow={1} |
||||
isRTL={true} |
||||
enableTilt={true} |
||||
showArrows={false} |
||||
> |
||||
{data.map((item, i) => ( |
||||
<Item height={height} data={item} key={i} /> |
||||
))} |
||||
</Carousel> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
return ( |
||||
<Link to={props.data.link} style={{ |
||||
minWidth: `${props.data.width}`, |
||||
height: props.height, |
||||
}}> |
||||
<img |
||||
src={props.data.image} |
||||
alt="عکس" |
||||
style={{ |
||||
minWidth: `${props.data.width}`, |
||||
height: props.height, |
||||
}} |
||||
/> |
||||
</Link> |
||||
); |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
.home-slider { |
||||
width: 100%; |
||||
padding: 2px 0px 0px; |
||||
margin: 20px 0px; |
||||
} |
||||
|
||||
.rec-dot_active { |
||||
background-color: green !important; |
||||
color: white !important; |
||||
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; |
||||
} |
||||
|
||||
.Carousel-button-10 { |
||||
background-color: white !important; |
||||
} |
||||
.rec-pagination { |
||||
z-index: 600; |
||||
// left: calc(50% - 20px) !important; |
||||
& button { |
||||
background-color: grey; |
||||
margin: 2px !important; |
||||
box-shadow: 0px 0px 0px rgba(255, 255, 255, 1); |
||||
&:focus{ |
||||
box-shadow: 0px 0px 0px rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rec-slider-container{ |
||||
margin : 0px !important; |
||||
} |
||||
@ -1,8 +1,12 @@ |
||||
.home-static{ |
||||
justify-content: space-around; |
||||
margin-top: 20px; |
||||
margin: 20px 0px; |
||||
width: 100%; |
||||
img { |
||||
padding : 5px; |
||||
&__list{ |
||||
justify-content: space-around; |
||||
width: 100%; |
||||
img { |
||||
padding : 5px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -1,8 +1,23 @@ |
||||
import React, { Component } from "react"; |
||||
import SearchIcon from "@material-ui/icons/Search"; |
||||
import MenuIcon from "@material-ui/icons/Menu"; |
||||
|
||||
import './Navbar.scss'; |
||||
import "./Navbar.scss"; |
||||
export default class Navbar extends Component { |
||||
render() { |
||||
return <nav className="navbar"></nav>; |
||||
return ( |
||||
<nav className="navbar d-flex"> |
||||
<div> |
||||
<MenuIcon |
||||
style={{ width: 40, height: 40, color: "black"}} |
||||
/> |
||||
</div> |
||||
<div> |
||||
<SearchIcon |
||||
style={{ width: 40, height: 40, color: "black"}} |
||||
/> |
||||
</div> |
||||
</nav> |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -1,8 +1,8 @@ |
||||
.navbar{ |
||||
width: 100%; |
||||
height: 60px; |
||||
background-color: rgb(14, 185, 14); |
||||
position: fixed; |
||||
top : 0px; |
||||
left : 0px; |
||||
justify-content: space-between; |
||||
} |
||||
@ -0,0 +1,184 @@ |
||||
import React, { Component } from "react"; |
||||
import FormControlLabel from "@material-ui/core/FormControlLabel"; |
||||
import { withStyles } from "@material-ui/core/styles"; |
||||
import Switch from "@material-ui/core/Switch"; |
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; |
||||
|
||||
import "./List.scss"; |
||||
export default class List extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
chec: true, |
||||
listData: [ |
||||
{ |
||||
id: 0, |
||||
pid: null, |
||||
image: null, |
||||
title: "سامسونگ", |
||||
subTitle: "گوشیهای برند سامسونگ", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "جدید", |
||||
status: 0, |
||||
link: "/samsung", |
||||
}, |
||||
{ |
||||
id: 1, |
||||
pid: null, |
||||
image: null, |
||||
title: "هواوی", |
||||
subTitle: "گوشیهای برند هواوی", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "", |
||||
status: 1, |
||||
link: "/huawei", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
pid: 0, |
||||
image: null, |
||||
title: "A51", |
||||
subTitle: "گوشیهای برند سامسونگ", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "جدید", |
||||
status: 0, |
||||
link: "/samsung/A51", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
pid: 0, |
||||
image: null, |
||||
title: "S21 ultra", |
||||
subTitle: "گوشیهای برند سامسونگ", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "", |
||||
status: 0, |
||||
link: "/samsung/s21ultra", |
||||
}, |
||||
{ |
||||
id: 4, |
||||
pid: 0, |
||||
image: null, |
||||
title: "m52", |
||||
subTitle: "گوشیهای برند سامسونگ", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "جدید", |
||||
status: 1, |
||||
link: "/samsung/m52", |
||||
}, |
||||
{ |
||||
id: 5, |
||||
pid: 1, |
||||
image: null, |
||||
title: "p40", |
||||
subTitle: "گوشیهای برند هواوی", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "جدید", |
||||
status: 0, |
||||
link: "/huawei/p40", |
||||
}, |
||||
{ |
||||
id: 6, |
||||
pid: 1, |
||||
image: null, |
||||
title: "هواوی", |
||||
subTitle: "گوشیهای برند هواوی", |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||
date: new Date(), |
||||
badge: "", |
||||
status: 1, |
||||
link: "/huawei/p40", |
||||
}, |
||||
], |
||||
}; |
||||
} |
||||
|
||||
handleChange = (event) => { |
||||
this.setState({ [event.target.name]: event.target.checked }); |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="list d-flex flex-column"> |
||||
<header className="list__header d-flex flex-column"> |
||||
<div className="list__header--back d-flex"> |
||||
<ChevronLeftIcon style={{ width: 20, height: 20 }} /> |
||||
بازگشت |
||||
</div> |
||||
<div className="list__header--bottom d-flex"> |
||||
<FormControlLabel |
||||
control={ |
||||
<IOSSwitch |
||||
checked={this.state.checkedB} |
||||
onChange={this.handleChange} |
||||
name="checkedB" |
||||
/> |
||||
} |
||||
label="باکس" |
||||
/> |
||||
<div className="list__header--search d-flex"></div> |
||||
</div> |
||||
</header> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const IOSSwitch = withStyles((theme) => ({ |
||||
root: { |
||||
width: 42, |
||||
height: 26, |
||||
padding: 0, |
||||
margin: theme.spacing(1), |
||||
}, |
||||
switchBase: { |
||||
padding: 1, |
||||
"&$checked": { |
||||
transform: "translateX(16px)", |
||||
color: theme.palette.common.white, |
||||
"& + $track": { |
||||
backgroundColor: "#52d869", |
||||
opacity: 1, |
||||
border: "none", |
||||
}, |
||||
}, |
||||
"&$focusVisible $thumb": { |
||||
color: "#52d869", |
||||
border: "6px solid #fff", |
||||
}, |
||||
}, |
||||
thumb: { |
||||
width: 24, |
||||
height: 24, |
||||
}, |
||||
track: { |
||||
borderRadius: 26 / 2, |
||||
border: `1px solid ${theme.palette.grey[400]}`, |
||||
backgroundColor: theme.palette.grey[50], |
||||
opacity: 1, |
||||
transition: theme.transitions.create(["background-color", "border"]), |
||||
}, |
||||
checked: {}, |
||||
focusVisible: {}, |
||||
}))(({ classes, ...props }) => { |
||||
return ( |
||||
<Switch |
||||
focusVisibleClassName={classes.focusVisible} |
||||
disableRipple |
||||
classes={{ |
||||
root: classes.root, |
||||
switchBase: classes.switchBase, |
||||
thumb: classes.thumb, |
||||
track: classes.track, |
||||
checked: classes.checked, |
||||
}} |
||||
{...props} |
||||
/> |
||||
); |
||||
}); |
||||
@ -0,0 +1,20 @@ |
||||
.list{ |
||||
width: 100vw; |
||||
padding : 5px; |
||||
&__header{ |
||||
.MuiFormControlLabel-root{ |
||||
margin-right: 5px; |
||||
margin-left: 0px; |
||||
flex-direction: row-reverse !important; |
||||
} |
||||
&--back{ |
||||
width: 100%; |
||||
direction: ltr; |
||||
align-items: center; |
||||
} |
||||
&--bottom{ |
||||
justify-content: space-between; |
||||
|
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue