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
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, |
|
}, |
|
], |
|
};
|
|
|