VideoMetadata.js

import React from 'react';
import {Button, Divider, Icon} from "semantic-ui-react";
import './VideoMetadata.scss';

export function VideoMetadata(props) {
  const viewCount = Number(props.viewCount).toLocaleString() || '';

  return (
    <div className='video-metadata'>
      <h3>Video title</h3>
      <div className='video-stats'>
        <span>{viewCount} views</span>
        <div>
          {/*TODO*/}
        </div>
      </div>
      <Divider/>
    </div>
  );
}

VideoMetadata.scss

@import '../../styles/shared.scss';

.video-metadata {
    color: #707070;
    font-size: 16px;

    h3 {
        font-weight: 400;
        color: $text-color-dark;
    }

    .video-stats {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
}