reza added list component

master
Reza_ashrafi 3 years ago
parent d24d71315a
commit 141282cd24
  1. 4
      package.json
  2. 4
      src/App.css
  3. 2
      src/App.js
  4. 8
      src/AppRouter.js
  5. 1
      src/index.js
  6. 28
      src/views/Auth/Auth.js
  7. 6
      src/views/Auth/Auth.scss
  8. 44
      src/views/Auth/Login/Cellphone/Cellphone.js
  9. 21
      src/views/Auth/Login/Cellphone/Cellphone.scss
  10. 151
      src/views/Auth/Login/Code/Code.js
  11. 21
      src/views/Auth/Login/Code/Code.scss
  12. 28
      src/views/Auth/Login/Login.js
  13. 8
      src/views/Auth/Login/Timer/Timer.css
  14. 67
      src/views/Auth/Login/Timer/Timer.js
  15. 11
      src/views/Auth/Profile/Profile.js
  16. 102
      src/views/Home/Home.js
  17. 2
      src/views/Home/Home.scss
  18. 35
      src/views/Home/HomeHeader/HomeHeader.js
  19. 5
      src/views/Home/HomeHeader/HomeHeader.scss
  20. 27
      src/views/Home/HomeScroll/HomeScroll.js
  21. 29
      src/views/Home/HomeScroll/HomeScroll.scss
  22. 64
      src/views/Home/HomeSlider/HomeSlider.js
  23. 31
      src/views/Home/HomeSlider/HomeSlider.scss
  24. 41
      src/views/Home/HomeStatic/HomeStatic.js
  25. 6
      src/views/Home/HomeStatic/HomeStatic.scss
  26. 19
      src/views/Home/Navbar/Navbar.js
  27. 2
      src/views/Home/Navbar/Navbar.scss
  28. 184
      src/views/List/List.js
  29. 20
      src/views/List/List.scss
  30. 2556
      yarn.lock

@ -3,6 +3,8 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -13,6 +15,7 @@
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-elastic-carousel": "^0.11.5",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
@ -21,6 +24,7 @@
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"sass": "^1.34.0", "sass": "^1.34.0",
"styled-components": "^5.3.0",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {

@ -13,3 +13,7 @@ a {
font-family: IRANSansNumeral; font-family: IRANSansNumeral;
src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf); src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);
} }
input:focus{
outline: none;
}

@ -2,6 +2,8 @@ import React, { Component } from "react";
import AppRouter from "./AppRouter"; import AppRouter from "./AppRouter";
import store from "./Redux/store"; import store from "./Redux/store";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component { class App extends Component {
render() { render() {
return ( return (

@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import proxy from './Redux/proxy'; import proxy from './Redux/proxy';
import Home from './views/Home/Home'; import Home from './views/Home/Home';
import Auth from './views/Auth/Auth'; import Auth from './views/Auth/Auth';
import List from './views/List/List';
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
@ -21,7 +22,12 @@ class AppRouter extends Component {
return ( return (
<Router> <Router>
<Switch>{home}</Switch> <Switch>
{home}
<Route path={'/list'}>
<List />
</Route>
</Switch>
</Router> </Router>
); );
} }

@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render( ReactDOM.render(

@ -1,7 +1,33 @@
import React, { Component } from "react"; 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 { export default class Auth extends Component {
constructor(props) {
super(props);
this.state = {
page: "login",
};
}
render() { 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>
);
}
}

@ -5,58 +5,95 @@ import HomeHeader from "./HomeHeader/HomeHeader";
import HomeStatic from "./HomeStatic/HomeStatic"; import HomeStatic from "./HomeStatic/HomeStatic";
import HomeScroll from "./HomeScroll/HomeScroll"; import HomeScroll from "./HomeScroll/HomeScroll";
import Footer from "./Footer/Footer"; import Footer from "./Footer/Footer";
import HomeSlider from "./HomeSlider/HomeSlider";
import pic from "../../assets/images/pic.png"; import pic from "../../assets/images/pic.png";
import './Home.scss'; import "./Home.scss";
export default class Home extends Component { export default class Home extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
homeData: [ homeData: [
{ {
type: "header", type: "slider",
title: "",
height: 200,
data: [ data: [
{ {
image: pic, image: pic,
width: 1, width: '100%',
link : '',
},
{
image: pic,
width: '100%',
link : '',
},
{
image: pic,
width: '100%',
link : '',
}, },
], ],
}, },
{ {
type: "static-box", type: "static",
title: "مزایا",
height: 100,
data: [ data: [
{ {
image: pic, image: pic,
width: 3, width: 30,
link : '',
},
{
image: pic,
width: 30,
link : '',
}, },
{ {
image: pic, image: pic,
width:3, width: 30,
link : '',
}, },
// {
// image: pic,
// width:3,
// },
], ],
}, },
{ {
type: "scroll", type: "scroll",
title: "لیست محصولات",
height: 250,
data: [ data: [
{ {
image: pic, image: pic,
width: 1.5, width: '80%',
link : '',
}, },
{ {
image: pic, image: pic,
width: 2, width: '50%',
link : '',
},
{
image: pic,
width: '40%',
link : '',
},
],
}, },
{
type: "header",
title: "عنوان سایت",
height: 200,
data: [
{ {
image: pic, image: pic,
width: 2.5, width: 100,
}, },
], ],
}, },
], ],
}; };
} }
@ -66,7 +103,13 @@ export default class Home extends Component {
<div className="home d-flex flex-column"> <div className="home d-flex flex-column">
<Navbar /> <Navbar />
{homeData.map((item, i) => ( {homeData.map((item, i) => (
<Identifier type={item.type} data={item.data} key={i} /> <Identifier
type={item.type}
height={item.height}
title={item.title}
data={item.data}
key={i}
/>
))} ))}
<Footer /> <Footer />
</div> </div>
@ -77,9 +120,34 @@ export default class Home extends Component {
const Identifier = (props) => { const Identifier = (props) => {
return ( return (
<> <>
{props.type === "header" ? <HomeHeader data={props.data} /> : null} {props.type === "header" ? (
{props.type === "static-box" ? <HomeStatic data={props.data} /> : null} <HomeHeader
{props.type === "scroll" ? <HomeScroll data={props.data} /> : null} height={props.height}
title={props.title}
data={props.data}
/>
) : null}
{props.type === "static" ? (
<HomeStatic
height={props.height}
title={props.title}
data={props.data}
/>
) : null}
{props.type === "scroll" ? (
<HomeScroll
height={props.height}
title={props.title}
data={props.data}
/>
) : null}
{props.type === "slider" ? (
<HomeSlider
height={props.height}
title={props.title}
data={props.data}
/>
) : null}
</> </>
); );
}; };

@ -1,5 +1,5 @@
.home{ .home{
width: 100vw; width: 100vw;
padding : 0px 5px; padding : 0px 10px;
overflow-x: hidden; overflow-x: hidden;
} }

@ -1,28 +1,53 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import {Link} from 'react-router-dom';
import "./HomeHeader.scss"; import "./HomeHeader.scss";
export default class HomeHeader extends Component { export default class HomeHeader extends Component {
render() { render() {
const { data } = this.props; const { data, height, title } = this.props;
return ( return (
<section className="home-header d-flex"> <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) => ( {data.map((item, i) => (
<Item data={item} key={i} /> <Item data={item} key={i} />
))} ))}
</section> </div>
</header>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
return ( return (
<Link to={props.data.link} style={{
width: `${props.data.width}%`,
height: "100%",
}}>
<img <img
src={props.data.image} src={props.data.image}
alt="عکس" alt="عکس"
style={{ style={{
width: `${100 / props.data.width}%`, width: `${props.data.width}%`,
height: '100%', height: "100%",
}} }}
/> />
</Link>
); );
}; };

@ -1,4 +1,9 @@
.home-header{ .home-header{
width: 100%; width: 100%;
height : 250px; height : 250px;
margin : 20px 0px;
&__list{
width: 100%;
height: 100%;
}
} }

@ -1,28 +1,49 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import { Link } from "react-router-dom";
import "./HomeScroll.scss"; import "./HomeScroll.scss";
export default class HomeScroll extends Component { export default class HomeScroll extends Component {
render() { render() {
const { data } = this.props; const { data, height, title } = this.props;
return ( return (
<div className="home-scroll d-flex"> <div
className="home-scroll d-flex flex-column"
style={{ height: height }}
>
<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>
<div className="home-scroll__list d-flex">
{data.map((item, i) => ( {data.map((item, i) => (
<Item data={item} key={i} /> <Item data={item} key={i} />
))} ))}
</div> </div>
</div>
); );
} }
} }
const Item = (props) => { const Item = (props) => {
return ( return (
<Link to={props.data.link} style={{
minWidth: `${props.data.width}`,
height: "100%",
}}>
<img <img
src={props.data.image} src={props.data.image}
alt="عکس" alt="عکس"
style={{ style={{
minWidth: window.innerWidth / props.data.width, width : '100%',
height: '100%', height: '100%',
}} }}
/> />
</Link>
); );
}; };

@ -1,9 +1,28 @@
.home-scroll { .home-scroll {
margin-top: 20px; margin: 20px 0px;
width: 100vw; width: 100%;
height: 200px; &__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; overflow-x: scroll;
img { transform : translateX(0px);
margin: 0px 5px; 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,14 +1,38 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import { Link } from "react-router-dom";
import "./HomeStatic.scss"; import "./HomeStatic.scss";
export default class HomeStatic extends Component { export default class HomeStatic extends Component {
render() { render() {
const { data } = this.props; const { data, height, title } = this.props;
return ( return (
<section className="home-static d-flex"> <section
className={
title ? "home-static d-flex flex-column" : "home-static 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-static__list d-flex">
{data.map((item, i) => ( {data.map((item, i) => (
<Item data={item} key={i} /> <Item data={item} key={i} />
))} ))}
</div>
</section> </section>
); );
} }
@ -16,10 +40,21 @@ export default class HomeStatic extends Component {
const Item = (props) => { const Item = (props) => {
return ( return (
<Link
to={props.data.link}
style={{
width: `${props.data.width}%`,
height: `calc(100vw / props.data.width)`,
}}
>
<img <img
src={props.data.image} src={props.data.image}
alt="عکس" alt="عکس"
style={{ width: `${100 / props.data.width}%`, height: `calc(100vw / props.data.width)` }} style={{
width: '100%',
height: '100%',
}}
/> />
</Link>
); );
}; };

@ -1,8 +1,12 @@
.home-static{ .home-static{
margin: 20px 0px;
width: 100%;
&__list{
justify-content: space-around; justify-content: space-around;
margin-top: 20px;
width: 100%; width: 100%;
img { img {
padding : 5px; padding : 5px;
} }
}
} }

@ -1,8 +1,23 @@
import React, { Component } from "react"; 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 { export default class Navbar extends Component {
render() { 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{ .navbar{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: rgb(14, 185, 14);
position: fixed; position: fixed;
top : 0px; top : 0px;
left : 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;
}
}
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save