reza added list component

package.json

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

src/App.css

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

src/App.js

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

src/AppRouter.js

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

src/index.js

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

src/views/Auth/Auth.js

@@ -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>
+    );
   }
 }

src/views/Auth/Auth.scss

@@ -0,0 +1,6 @@
+.auth{
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  background-color: grey;
+}

src/views/Auth/Login/Cellphone/Cellphone.js

@@ -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>
+    );
+  }
+}

src/views/Auth/Login/Cellphone/Cellphone.scss

@@ -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;
+    }
+  }
+}

src/views/Auth/Login/Code/Code.js

@@ -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>
+    );
+  }
+}

src/views/Auth/Login/Code/Code.scss

@@ -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;
+    
+  }
+}

src/views/Auth/Login/Login.js

@@ -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} />}</>;
+  }
+}

src/views/Auth/Login/Timer/Timer.css

@@ -0,0 +1,8 @@
+.timer{
+  flex-direction: row;
+  direction: rtl !important;
+  margin-right: 10px;
+  position : absolute;
+  bottom: 40%;
+  color: white;
+}

src/views/Auth/Login/Timer/Timer.js

@@ -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>
+    );
+  }
+}

src/views/Auth/Profile/Profile.js

@@ -0,0 +1,11 @@
+import React, { Component } from "react";
+
+export default class Profile extends Component {
+  render() {
+    return (
+      <div className="auth-profile d-flex">
+        
+      </div>
+    );
+  }
+}

src/views/Home/Home.js

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

src/views/Home/Home.scss

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

src/views/Home/HomeHeader/HomeHeader.js

@@ -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">
+      <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} />
           ))}
-      </section>
+        </div>
+        
+      </header>
     );
   }
 }
 
 const Item = (props) => {
   return (
+    <Link to={props.data.link} style={{
+      width: `${props.data.width}%`,
+      height: "100%",
+    }}>
       <img
         src={props.data.image}
         alt="عکس"
         style={{
-        width: `${100 / props.data.width}%`,
+          width: `${props.data.width}%`,
-        height: '100%',
+          height: "100%",
         }}
       />
+    </Link>
   );
 };

src/views/Home/HomeHeader/HomeHeader.scss

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

src/views/Home/HomeScroll/HomeScroll.js

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

src/views/Home/HomeScroll/HomeScroll.scss

@@ -1,9 +1,28 @@
 .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;
-  img {
+    transform : translateX(0px);
-    margin: 0px 5px;
+    a{
+      margin: 0px 6px;
+    }
   }
+  
 }

src/views/Home/HomeSlider/HomeSlider.js

@@ -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>
+  );
+};

src/views/Home/HomeSlider/HomeSlider.scss

@@ -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;
+}

src/views/Home/HomeStatic/HomeStatic.js

@@ -1,14 +1,38 @@
 import React, { Component } from "react";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import { Link } from "react-router-dom";
 
 import "./HomeStatic.scss";
 export default class HomeStatic extends Component {
   render() {
-    const { data } = this.props;
+    const { data, height, title } = this.props;
     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) => (
             <Item data={item} key={i} />
           ))}
+        </div>
       </section>
     );
   }
@@ -16,10 +40,21 @@ export default class HomeStatic extends Component {
 
 const Item = (props) => {
   return (
+    <Link
+      to={props.data.link}
+      style={{
+        width: `${props.data.width}%`,
+        height: `calc(100vw / props.data.width)`,
+      }}
+    >
       <img
         src={props.data.image}
         alt="عکس"
-      style={{ width: `${100 / props.data.width}%`, height: `calc(100vw / props.data.width)` }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
       />
+    </Link>
   );
 };

src/views/Home/HomeStatic/HomeStatic.scss

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

src/views/Home/Navbar/Navbar.js

@@ -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>
+    );
   }
 }

src/views/Home/Navbar/Navbar.scss

@@ -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;
 }

src/views/List/List.js

@@ -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}
+    />
+  );
+});

src/views/List/List.scss

@@ -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;
+
+    }
+  }
+}