leumas-private-shared/src/LeumasID/LeumasIDRender.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import bwipjs from 'bwip-js';
import QRCode from 'qrcode.react';
import React from 'react';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
function LeumasIdRender({ id }) {
    const [showFront, setShowFront] = useState(true);
    const barcodeCanvasRef = useRef(null);
    const auth = useAuthUser();
    const leumasLogo  = "https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg"
    // console.log("ID : " , id , auth())
    useEffect(() => {
        if (id?.barcode) {
            try {
                bwipjs.toCanvas(barcodeCanvasRef.current, {
                    bcid: 'code128',
                    text: id.barcode,
                    scale: 1,
                    height: 10,
                });
            } catch (err) {
                console.error('Error generating barcode:', err);
            }
        }
    }, [id]);

    console.log(auth)
    console.log("ID " , id)

    const toggleFlip = () => {
        setShowFront(!showFront);
    };

    const renderFront = () => (
        <div className="border-2 rounded-lg p-1 min-h-[100px] max-h-[150px] max-w-[300px] flex bg-gray-200 relative">
        {/* Logo as background with white overlay */}
        <div className="absolute inset-0 bg-white bg-opacity-50 flex justify-end items-center">
            <img src={leumasLogo} alt="Leumas Logo" className="h-[75px] w-[75px] opacity-75 object-cover" />
        </div>
        <div className='w-1/3 z-10 '>
            {/* <p className='text-[8px] font-bold float-right px-1 text-electric-blue'>LEUMAS ID</p> */}
            <img src={id?.owner?.profileImage ? id?.owner?.profileImage : auth?.profilePicture} className=''/>

        </div>

        <div className='w-2/3 flex flex-col justify-between z-10'>

            <div>
            <span className={`${spanStyle}`}>
    <p className={`${smallRedText}`}>?Name:</p>
    <p className={`${boldBlueText} `}>{id?.firstName} {id?.lastName}</p>
</span>

<span className={`${spanStyle}`}>
    <p className={`${smallRedText}`}>DOB:</p>
    <p className={`${boldBlueText}`}>
        {id?.dateOfBirth ? new Date(id.dateOfBirth).toLocaleDateString('en-US', { timeZone: 'UTC' }) : 'N/A'}
    </p>
</span>

            <span className={`${spanStyle}`}><p className={`${smallRedText} hover:text-underline`}>Wallet:</p><p className={`${boldBlueText} `}>{id?.metaMaskOwnerWallet?.substring(0,12)}...</p></span>


            <p className={`${BlackBold} flex items-center justify-between w-full`}>Sig : {id?.serialCode?.substring(0,8)}</p>

            </div>

            <canvas ref={barcodeCanvasRef} className='px-2' style={{ height: '20px', width: '100%' }}></canvas>
        </div>
    </div>
    );

    const renderBack = () => (
        <div className="border-2 rounded-lg p-1 min-h-[100px] max-h-[150px] max-w-[300px] flex bg-gray-200 relative flex items-center justify-center">
            <div className='flex flex-col items-center max-h-full'>
                {/* QR Code */}
                <QRCode className='max-w-[50px] max-h-[50px]'  value={id?.PoplLink || "https://popl.co"} size={100} />
                
            </div>
        </div>
    );
    // Styles
    const smallRedText = "text-[5px] px-1 text-red-400";
    const boldBlueText = "text-[6px] text-blue-800 font-bold bg-opacity-30 font-bold ";
    const spanStyle = "flex gap-1 items-center justify-between";
    const BlackBold = "text-black font-bold px-1 text-[7px]";

  return (
        <div className={`leumas-id-container pb-10 ${showFront ? '' : 'flipped'}`} onClick={toggleFlip}>
            <div className="leumas-id-card">
                <div className="card-front">
                    {renderFront()}
                </div>
                <div className="card-back">
                    {renderBack()}
                </div>
            </div>
        </div>
    );
}

LeumasIdRender.propTypes = {
    id: PropTypes.object.isRequired,
};

export default LeumasIdRender;