webtrigon-accounts/src/components/item-card/itemCard.tsx

import React, { useState } from 'react';
import styles from './itemCard.module.scss';
import { ReactComponent as ChevronBack } from 'ionicons/dist/svg/chevron-back.svg';
import { IonButton } from '@ionic/react';

type OwnProps = {
    leftImage?: string,
    heading: {
        name: string,
        value: string
    },
    value: string,
    description?: string,
    rightText?: {
        name: string,
        type: 'success' | 'danger' | 'warning' | undefined
    },
    details?: Array<{
        name: string,
        value: string
    }>,
    form?: JSX.Element,
}

// Card - Image on the left, heading-value-description in the middle and status or any text on the right. 
// Eg: Pending invoice cards. Follow input form patter from the commented card in the end of this file

export const ItemCard: React.FC<OwnProps> = (props) => {
    const [showDetails, setShowDetails] = useState<boolean>(false);

    let statusClass = '';

    if (props.rightText && props.rightText.type) {
        switch(props.rightText.type) {
            case 'success' : statusClass = styles.success; break;
            case 'danger' : statusClass = styles.danger; break;
            case 'warning' : statusClass = styles.warning; break;
            default: statusClass = '';
        }
    }

    return <div>
        <section className={styles.card} onClick={() => setShowDetails(true)}>
            <figure>
                <img src={props.leftImage} />
            </figure>
            <div className={styles.contentHolder}>
                <h6> { props.heading.name }: {props.heading.value} </h6>
                <h2> {props.value} </h2>
                <p> {props.description} </p>
            </div>

            { props.rightText && <div className={styles.status}>
                <span
                className={statusClass}> { props.rightText.name } </span>
            </div> }
        </section>

        { showDetails && props.details && <div className={styles.backdrop} onClick={(e: any) => {
            if (e.target.className.toString().includes('backdrop')) {
                setShowDetails(false);
            }
        }}>
            <section className={styles.cardDetails}>
                <header>
                    <IonButton onClick={() => setShowDetails(false)} fill={'clear'} size={'small'}> <ChevronBack /> </IonButton>
                    <h4> Pending Invoice </h4>
                </header>

                <ul>
                    { props.details.map((detail, key) => {
                        return <li key={key}>
                            <label> { detail.name } </label>
                            <p> { detail.value } </p>
                        </li>
                    }) }
                </ul>

                { props.form }
            </section>
        </div> }

    </div>
}


{/* <section className={styles.form}>
    <div className={styles.inputHolder}>
        <label> Payment Date </label>
        <IonDatetime mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}></IonDatetime>
    </div>

    <div className={styles.inputHolder}>
        <label> Reference No. </label>
        <IonInput placeholder={'Enter here'}></IonInput>
    </div>

    <div className={styles.buttonsHolder}>
        <IonButton fill={'outline'} className={styles.cancel} shape={'round'}> Cancel Invoice </IonButton>
        <IonButton fill={'solid'} className={styles.approve} shape={'round'}
        onClick={() => setShowDetails(false)}> Paid </IonButton>
    </div>
</section> */}