Youtube NextUpVideo

NextUpVideo.js

import React from 'react';
import './NextUpVideo.scss';
import {Checkbox, Divider} from "semantic-ui-react";
import {VideoPreview} from '../../VideoPreview/VideoPreview';

export function NextUpVideo(props) {
  return (
    <React.Fragment>
      <div className='next-up-container'>
          <h4>Up next</h4>
          <div className='up-next-toggle'>
            <span>Autoplay</span>
            <Checkbox toggle defaultChecked/>
          </div>
      </div>
      <VideoPreview horizontal={true}/>
      <Divider/>
    </React.Fragment>
  );
}

NextUpVideo.scss

.next-up-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .up-next-toggle {
    display: flex;
    align-items: center;

    span {
      margin-right: 10px;
    }
  }
}