You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

103 lines
4.0 KiB

import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom";
import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index";
import ReplayIcon from "@material-ui/icons/Replay";
import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss";
export default class QRScan extends Component {
state = {
value: null,
facingMode: "environment",
};
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="qr-scan d-flex flex-column">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr-scan d-flex flex-column">
<Navbar />
<div className="mobile-qr-scan__back d-flex">
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-qr-scan__header d-flex flex-column">
<h1>اسکن بارکد</h1>
<p>
لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته
قرار دهید تا اسکن دوربین انجام شود
</p>
</header>
<div className="mobile-qr-scan__select d-flex">
<select
onChange={(e) =>
this.setState({ facingMode: e.target.value })
}
>
<option value="environment">دوربین عقب</option>
<option value="user">دوربین جلو</option>
</select>
</div>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
{/* <div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeCenter d-flex"></div> */}
{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>{this.state.value.text}</p>
)}
<p className="mobile-qr-scan__text d-flex">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای
</p>
<section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{data.map((item, i) => (
<LastQr data={item} key={i} />
))}
</section>
</div>
</>
) : null}
</>
);
}
}
QRScan.defaultProps = {
data: [
{
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی",
page: 13,
image: sciense_6,
},
],
};