nexshop-web-contents/src/component/playlist/playlist-title-view.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import PropTypes from 'prop-types';

export default class PlaylistTitleView extends Component {
    render() {
        return (
            <div className="top-bar-sub">
                <div className="top-bar-sub__title">{this.props.name}</div>
                <div className="top-bar-sub-menu">
                    <div className={`top-bar-sub-menu__item${this.props.hasPlaylistItem ? '' : '--inactive'}`}
                         onClick={() => this.props.onPreviewClick(0)}>PREVIEW
                    </div>
                    <div className={`top-bar-sub-menu__item${this.props.hasPlaylistItem ? '' : '--inactive'}`}
                         onClick={this.props.onSavePlaylist}>SAVE
                    </div>
                </div>
            </div>
        );
    }
}

PlaylistTitleView.propTypes = {
    name: PropTypes.string.isRequired,
    hasPlaylistItem: PropTypes.bool,
    onSavePlaylist: PropTypes.func.isRequired,
    onPreviewClick: PropTypes.func.isRequired,
};