victorAnumudu
70 lines
2.8 KiB
React
70 lines
2.8 KiB
React
import { forwardRef } from "react";
|
|
import QRCode from "react-qr-code";
|
|
import { useSelector } from "react-redux";
|
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
|
|
const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
|
|
const { userDetails } = useSelector((state) => state.userDetails);
|
|
return (
|
|
<div
|
|
className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
|
|
ref={myRef}
|
|
>
|
|
<div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
|
|
<div className="flex items-center justify-around h-[380px]">
|
|
<div className="flex flex-col">
|
|
<h2 className="print:block hidden font-bold text-lg tracking-wide text-dark-gray dark:text-white capitalize mb-10">
|
|
Firstname: {familyData?.data?.firstname ? familyData?.data?.firstname : "please wait..."}
|
|
</h2>
|
|
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
|
Username:{" "}
|
|
<span className="ml-2 normal-case">
|
|
{familyData?.data?.username ? familyData?.data?.username : "please wait..."}
|
|
</span>
|
|
</h2>
|
|
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
|
Pin:{" "}
|
|
<span className="ml-2 normal-case">
|
|
{familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<span className="text-5xl text-gray-400 opacity-20 font-bold">
|
|
or
|
|
</span>
|
|
|
|
<div className="max-w-[200px]">
|
|
<p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
|
|
Scan the code from mobile app
|
|
</p>
|
|
{familyData.loading ?
|
|
<div className="w-full">
|
|
<LoadingSpinner size='8' color='sky-blue' />
|
|
</div>
|
|
:
|
|
<QRCode
|
|
size={256}
|
|
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
|
|
// value={`https://www.google.com`}
|
|
value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
|
|
viewBox={`0 0 256 256`}
|
|
/>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div className="h-[50px] w-full flex justify-center items-center">
|
|
<button
|
|
className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
|
|
onClick={handlePrint}
|
|
>
|
|
Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default FamilyAccount;
|