Figures.tsx

interface FigureProps{
    pic1: string, 
    pic2: string, 
    pic3?: string, 
    pic4?: string, 
    pic5?: string, 
    pic6?: string, 
    description: React.ReactNode | string, 
    num: string |number; 
}


export function ThreeVertical({description, num, pic1, pic2, pic3}:FigureProps){

    return(
        <figure>
            <img src={pic1}/>
            <img src={pic2}/>
            <img src={pic3}/>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
    )
}

export function TwoVertical({description, num, pic1, pic2}:FigureProps){

    return(
        <figure>
            <img src={pic1}/>
            <img src={pic2}/>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
    )
}

export function TwoHorizontal({description, num, pic1, pic2}:FigureProps){

    return(
        <figure>
            <div className="row align-items-center">
                <div className="col">
                    <img src={pic1}/>
                </div>
                <div className="col">
                    <img src={pic2}/>
                </div>
            </div>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
    )
}

export function ThreeHorizontal({description, num, pic1, pic2, pic3}:FigureProps){

    return(
        <figure>
            <div className="row align-items-center">
                <div className="col">
                    <img src={pic1}/>
                </div>
                <div className="col">
                    <img src={pic2}/>
                </div>
                <div className="col">
                    <img src={pic3}/>
                </div>
            </div>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
    )
}