mediaarea.tsx

import React from "react";
import References from "./references";

interface MediaAreaProps {
    description: string;
    image?: string;
    video?: string;
    references?: string[];
}

function MediaArea({ description, image, video, references }: MediaAreaProps) {
    return (
        <div className={"detail-view-media-area"}>
            {image && <img src={image} />}
            <p className={"detail-view-text-area"}>{description}</p>

            {video && (
                <div className={"detail-view-media-area"}>
                    <video
                        controls={true}
                        className={"detail-view-video"}
                        src={video}
                    />
                </div>
            )}

            {references && (
                <div className={"detail-view-link-area"}>
                    <h6>Weiterführende Links</h6>
                    <References references={references} />
                </div>
            )}
            <div className={"detail-view-spacer"}></div>
        </div>
    );
}

export default MediaArea;