reza added qr-scan desktop

src/views/QRScan/Scanner/index.js

@@ -23,6 +23,7 @@ export default class Scanner extends Component {
   render() {
     return (
       <>
+        {window.innerWidth < 1000 ? (
           <QrReader
             delay={300}
             onError={this.handleError}
@@ -30,6 +31,16 @@ export default class Scanner extends Component {
             style={{ width: "100%" }}
             facingMode={this.props.parent.state.facingMode}
           />
+        ) : null}
+        {window.innerWidth > 1000 ? (
+          <QrReader
+            delay={300}
+            onError={this.handleError}
+            onScan={this.handleScan}
+            style={{ width: "100%", maxWidth: 300 }}
+            facingMode={this.props.parent.state.facingMode}
+          />
+        ) : null}
       </>
     );
   }

src/views/QRScan/index.js

@@ -9,6 +9,16 @@ import ReplayIcon from "@material-ui/icons/Replay";
 import sciense_6 from "../../assets/images/sciense-6.png";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
+    p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
+  },
+};
+
 export default class QRScan extends Component {
   state = {
     value: null,
@@ -20,8 +30,53 @@ export default class QRScan extends Component {
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="qr-scan d-flex flex-column">
+            <div className="qr-scan d-flex flex-column align-items-center">
               <Navbar />
+              <div className="qr-scan__box d-flex flex-column">
+                <header className="qr-scan__box--header d-flex flex-column">
+                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>نکته</h1>
+                  <p style={{ fontSize: fontSize.desktop.p }}>
+                    لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار
+                    دهید تا اسکن دوربین انجام شود
+                  </p>
+                </header>
+                <div className="qr-scan__box--select d-flex">
+                  <select
+                    onChange={(e) =>
+                      this.setState({ facingMode: e.target.value })
+                    }
+                  >
+                    <option value="environment">دوربین عقب</option>
+                    <option value="user">دوربین جلو</option>
+                  </select>
+                </div>
+                <section className="qr-scan__box--camera d-flex justify-content-center align-items-center">
+                  {this.state.value !== null ? (
+                    <div
+                      style={{ zIndex: 1000 }}
+                      onClick={() => this.setState({ value: null })}
+                    >
+                      <ReplayIcon style={{ fontSize: 40, color: "grey" }} />
+                    </div>
+                  ) : (
+                    <Scanner parent={this} />
+                  )}
+                </section>
+                {this.state.value === null ? null : (
+                  <p style={{ fontSize: fontSize.desktop.p }}>
+                    {this.state.value.text}
+                  </p>
+                )}
+                <p
+                  style={{ fontSize: fontSize.desktop.p }}
+                  className="qr-scan__box--text d-flex"
+                >
+                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+                  استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و
+                  مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+                  تکنولوژی مورد نیاز و کاربردهای
+                </p>
+              </div>
             </div>
             <Footer />
           </>

src/views/QRScan/index.scss

@@ -129,5 +129,58 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 100px;
+  padding-top: 110px;
+  &__box {
+    width: 100%;
+    max-width: 700px;
+    &--header {
+      width: 100%;
+      h1 {
+        font-family: numeralBold;
+        color: #00cc69;
+      }
+      p {
+        font-family: numeralLight;
+        color: #4d4d4f;
+      }
+    }
+    &--select {
+      select {
+        margin-top: 10px;
+        border-radius: 4px;
+        position: relative;
+        background-color: #efefef;
+        border: 1px solid #a5a5a5;
+        font-size: 16px;
+        color: black;
+        // maxWidth : 70;
+        min-width: 80;
+        height: 35px;
+        padding: 5px;
+        font-family: numeralLight;
+        &:focus {
+          border-radius: 4;
+        }
+      }
+    }
+    &--camera {
+      margin-top: 20px;
+      width: 100%;
+      * {
+        border-radius: 10px;
+      }
+    }
+    &--text {
+      margin-top: 30px;
+      width: 100%;
+      p {
+        font-family: numeralLight;
+        color: #4d4d4f;
+      }
+    }
+    p {
+      font-family: numeralLight;
+      color: #4d4d4f;
+    }
+  }
 }