wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / QrCode.tsx

QrCode.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/QrCode.tsx

41 lines 1.7 KB

Raw Download Zip

1	import FieldWrapper from "./FieldWrapper";
2	import { __ } from "@wordpress/i18n";
3	import { QRCodeSVG } from 'qrcode.react';
4	import Icon from "../../utils/Icon";
5	import Copy from "../../utils/Copy";
6	import {useState} from "@wordpress/element";
7	const QrCode = ({
8	field,
9	onChange,
10	value,
11	}) => {
12	const [copied, setCopied] = useState(false);
13
14	const handleCopy = () => {
15	Copy(field.private_key);
16	setCopied(true);
17	};
18	return (
19	<>
20	<FieldWrapper
21	inputId={field.id}
22	label={field.label}
23	>
24	<div className="flex items-center space-x-4 mt-4">
25	<QRCodeSVG value={field.value} size={150} bgColor="#f3f4f6" fgColor="#000000" />
26
27	<div className="flex flex-col items-center flex-1">
28	<div className="text-md font-semibold mb-2">{field.private_key}</div>
29	<button className="relative w-full justify-center text-md border rounded-xl py-1.5 flex items-center space-x-2 shadow-sm hover:bg-orange-light">
30	<input id={field.id} onClick={ () => handleCopy() } className="cursor-pointer opacity-0 absolute inset-0" value={field.private_key}/>
31	<span className={copied ? "text-green" : ""}>{!copied ? __("Copy key", "ONBOARDING_WIZARD_TEXT_DOMAIN") : __("Copied!", "ONBOARDING_WIZARD_TEXT_DOMAIN")}</span>
32	<Icon name="copy" size={18} color="gray-800" fill="gray-800"/>
33	</button>
34	</div>
35	</div>
36	</FieldWrapper>
37	</>
38	);
39	};
40
41	export default QrCode;