4import Subscription from './Subscription/Subscription';
 5
 6const Subscriptions = props => (
 7  <Fragment> 8    <SideBarHeader title="subscriptions" /> 9    <Subscription label="MusicChannel" broadcasting />10    <Subscription label="Coursea" newVideoAmount="10" />11    <Subscription label="TEDx Talks" newVideoAmount="23" />12    <Subscription label="Stanford iOS" newVideoAmount="4" />13    <Subscription label="Udacity" newVideoAmount="114" />14    <Divider />15  </Fragment>16);
17
18export default Subscriptions;

 3
 4export function SideBarFooter() {
 5  return (
 6    <React.Fragment> 7      <div className="footer-block"> 8        <div>About Press Copyright</div> 9        <div>Creators Advertise</div>10        <div>Developers +MyTube</div>11        <div>Legal</div>12      </div>13      <div className="footer-block">14        <div>Terms Privacy</div>15        <div>Policy & Safety</div>16        <div>Test new features</div>17      </div>18      <div className="footer-block">19        <div>All prices include VAT</div>20      </div>21      <div className="footer-block">22        <div>A Youtube clone.</div>23      </div>24    </React.Fragment>25  );
26}

22
23  render() {
24    return (
25      <Fragment>26        <SideBar />27        <HomeContent videolist={this.state.data} />28      </Fragment>29    );
30  }
31}

20    }
21
22    return (
23      <Fragment>24        <div className="video-infobox">25          <Image className="channel-image" src="https://via.placeholder.com/48x48" circular />26          <div className="video-info">27            <div className="channel-title">Some Channel Name</div>28            <div className="channel-date">Thu May 14 2015</div>29          </div>30          <Button className="subscibe" color="youtube">subscribe</Button>31          <div className="video-description">32            <div className={descriptionTextClass}>33              <p>First paragraph</p>34              <p>Second paragraph</p>35              <p>First paragraph</p>36              <p>First paragraph</p>37              <p>First paragraph</p>38            </div>39            <Button compact onClick={this.toggleShowMoreButton}>{buttonTitle}</Button>40          </div>41        </div>42        <Divider />43      </Fragment>44    );
45  }
46

 8  const divider = props.hideDivider ? null : <Divider />;
 9
10  return (
11    <Fragment>12      <VideoGridHeader title={props.title} />13      <div className="video-grid">14        {15          props.videolist16            .map(video => <VideoPreview key={video.id} {...video} />)17        }1819      </div>20      {divider}21    </Fragment>22  );
23};
24

 4import { VideoPreview } from '../../VideoPreview/VideoPreview';
 5
 6const NextUpVideo = props => (
 7  <Fragment> 8    <div className="nextup-container"> 9      <h4>Up next</h4>10      <div className="nextup-toggle">11        <span>Autoplay</span>12        <Checkbox toggle />13      </div>14    </div>15    <VideoPreview horizontal />16    <Divider />17  </Fragment>18
19);
20