index.js

import React from 'react';
import PropTypes from 'prop-types';
import { Label, Menu, Tab } from 'semantic-ui-react';

import VideoTabContent from './VideoTabContent';
import AudioTabContent from './AudioTabContent';
import SubtitleTabContent from './SubtitleTabContent';

export function VideoTool({ data }) {
  if (!data) return <div />;
  const videoFormats = data.formats.filter(format => format.vcodec !== 'none');
  const audioFormats = data.formats.filter(format => format.acodec !== 'none' && format.vcodec === 'none');
  const panes = [
    {
      menuItem: { key: 'video', icon: 'youtube', content: 'Video' },
      displayName: 'Video',
      render: () => (
        <Tab.Pane>
          <VideoTabContent data={videoFormats} />
        </Tab.Pane>
      ),
    },
    {
      menuItem: { key: 'audio', icon: 'volume up', content: 'Audio' },
      displayName: 'Audio',
      render: () => (
        <Tab.Pane>
          <AudioTabContent data={audioFormats} />
        </Tab.Pane>
      ),
    },
    {
      menuItem: { key: 'subtitle', icon: 'closed captioning', content: 'Subtitle' },
      displayName: 'Subtitle',
      render: () => (
        <Tab.Pane>
          <SubtitleTabContent data={data.subtitles} />
        </Tab.Pane>
      ),
    },
    {
      menuItem: (
        <Menu.Item key="user">
          Sign up<Label color="red">New</Label>
        </Menu.Item>
      ),
      displayName: 'User',
      render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,
    },
  ];

  return (
    <div className="twelve wide tablet twelve side computer column">
      <div className="ui fluid">
        <Tab panes={panes} />
      </div>
    </div>
  );
}

VideoTool.propTypes = {
  data: PropTypes.object,
};

export default VideoTool;