video.jsx

import React from 'react';
import PropTypes from 'prop-types';
import ContentContainer from 'terra-content-container';
import SlidePanel from 'terra-slide-panel';
import Image from 'terra-image';
import SingleSelectList from 'terra-list/lib/SingleSelectList';
import List from 'terra-list';
import ItemView from 'terra-clinical-item-view';
import ItemDisplay from 'terra-clinical-item-display';
import DemographicsBanner from 'terra-demographics-banner';

const propTypes = {
  // exampleProp: PropTypes.string,
};

const defaultProps = {
  // exampleProp: 'Default prop',
};

const Video = props => (
  <div className="kaiju-Video">
    <ContentContainer header={<DemographicsBanner personName="John Smith" age="25 Years" dateOfBirthLabel="DOB" dateOfBirth="May 9, 1993" gender="Male" photo={<Image src="data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjQgMGExMS4zIDExLjMgMCAxIDEtMTEuMyAxMS4zQTExLjM1IDExLjM1IDAgMCAxIDI0IDB6bTE5LjUgNDh2LTUuN2ExNi43NyAxNi43NyAwIDAgMC0xNi44LTE2LjhoLTUuNUExNi43NSAxNi43NSAwIDAgMCA0LjUgNDIuM1Y0OHoiLz48L3N2Zz4=" alt="patient-image" height="50px" width="50px" />} />} fill={true}>
      <SlidePanel mainContent={<Image src="https://media.giphy.com/media/l46CjoMYO5n2hQnWE/giphy.gif" alt="alt-text" height="100%" width="100%" variant="default" />} panelContent={<SingleSelectList >
        <List.Item content={<ItemView layout="oneColumn" textEmphasis="default" accessoryAlignment="alignCenter" displays={[<ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />]} />} />
        <List.Item content={<ItemView layout="oneColumn" textEmphasis="default" accessoryAlignment="alignCenter" displays={[<ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />]} />} />
        <List.Item content={<ItemView layout="oneColumn" textEmphasis="default" accessoryAlignment="alignCenter" displays={[<ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />]} />} />
        <List.Item content={<ItemView layout="oneColumn" textEmphasis="default" accessoryAlignment="alignCenter" displays={[<ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />, <ItemDisplay textStyle="" text="Text" />]} />} />
      </SingleSelectList>} isOpen={true} fill={true} panelBehavior="overlay" panelPosition="end" panelSize="small" />
    </ContentContainer>
  </div>
);

Video.propTypes = propTypes;
Video.defaultProps = defaultProps;

export default Video;