WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

.

Browse Source
This commit is contained in:
Ebube
2023-05-30 02:11:51 +01:00
parent 9c00badcf6
commit 42c3676bcf
1 changed files with 64 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyManageTabs.jsx
+64 -17
View File
@@ -131,7 +131,12 @@ export default function FamilyManageTabs({
<LoadingSpinner size="8" color="sky-blue" /> <LoadingSpinner size="8" color="sky-blue" />
) : ( ) : (
<> <>
{name === "Tasks" && <FamilyTasks className={className} loader={loader}/>} {name === "Tasks" && (
<FamilyTasks
className={className}
loader={loader}
/>
)}
{name === "Account" && ( {name === "Account" && (
<Account familyDetails={familyDetails} /> <Account familyDetails={familyDetails} />
)} )}
@@ -213,29 +218,71 @@ function ProfileInfo({
} }
function Account({ familyDetails }) { function Account({ familyDetails }) {
const handlePrint = () => {
const printableContent = `
<html>
<head>
<style>
/* Add your desired styles here */
</style>
</head>
<body>
<div class"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>
<h1>Family member details</h1>
<p>Username: ${familyDetails?.username}</p>
<p>Password: ${familyDetails?.pin}</p>
<img src="${qrSample}" alt="QR Code" />
</body>
</html>
`;
const printWindow = window.open('', '', 'width=800,height=700');
printWindow.document.open();
printWindow.document.write(printableContent);
printWindow.document.close();
printWindow.onload = () => {
printWindow.print();
};
};
return ( return (
<div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"> <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
<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="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 items-center justify-around h-[380px]">
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"> <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">{familyDetails?.username}</span> Username:{" "}
</h2> <span className="ml-2 normal-case">
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"> {familyDetails?.username}
Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span> </span>
</h2> </h2>
</div> <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">{familyDetails?.pin}</span>
</h2>
</div>
<span className="text-5xl text-gray-400 opacity-20 font-bold">or</span> <span className="text-5xl text-gray-400 opacity-20 font-bold">
or
</span>
<div className=""> <div className="max-w-[200px]">
<p className="text-sm tracking-wide text-dark-gray dark:text-white">scan the code from mobile app</p> <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
<img src={qrSample} alt="qr-sample" className="h-[200px] w-[200px]" /> Scan the code from mobile app
</div> </p>
<img
src={qrSample}
alt="qr-sample"
className="h-[200px] w-[200px]"
/>
</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 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">Print</button>
</div>
</div> </div>
</div> </div>
); );