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.
 
 
 

65 lines
2.0 KiB

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions";
import { useNavigate } from "react-router-dom";
import Scanner from "react-qr-reader";
import laptopImage from "../../../assets/images/laptop.svg";
const facingMode = ["environment", "user"];
export const Scan = ({
setHeaderOptions,
}) => {
const navigate = useNavigate();
const handleScan = (data) => {
navigate(`/scan/${data}`);
};
const handleError = (err) => {
};
useEffect(() => {
setHeaderOptions({shown : false});
});
return (
<div
className="w-full h-screen overflow-hidden bg-transparent px-0 transform -translate-y-16"
style={{ backgroundImage: `url(${laptopImage})` }}
>
<div className="w-full h-full flex flex-col justify-center bg-gray-700 items-center px-6 bg-opacity-70 backdrop-filter backdrop-blur-sm">
<div className="rounded-3xl overflow-hidden w-full">
<Scanner
delay={300}
onError={handleError}
onScan={handleScan}
style={{ width: "100%" }}
facingMode={facingMode[0]}
/>
</div>
<strong className="mt-4 text-white text-base">
اسکن کد QR فعالسازی کتاب
</strong>
<p className="text-sm text-white text-center mt-2 font-medium leading-5">
کد کیو آر روی کارت فعالسازی را با دوربین گوشی اسکن کنید تا محتوای
دیجیتال مربوط به کتاب برای شما فعال شود
</p>
<button
onClick={() => navigate(-1)}
className="py-3 mt-16 w-2/5 rounded-3xl border-2 border-solid border-blueC0 text-blueC0 text-lg font-semibold"
>
بازگشت
</button>
</div>
</div>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Scan);