Youtube Comment

Comment.js

import React from 'react';
import './Comment.scss';
import {Button, Image} from "semantic-ui-react";
import {Rating} from '../../../components/Rating/Rating';

export function Comment(props) {
  return (
    <div className='comment'>
      <Image className='user-image' src='http://via.placeholder.com/48x48' circular />
      <div>
        <div className='user-name'>User name</div>
        <span>Comment text</span>
        <div className='comment-actions'>
          <Rating likeCount={1}/> <Button size='mini' compact>REPLY</Button>
        </div>
      </div>
    </div>
  );
}

Comment.scss

@import '../../../styles/shared.scss';
.comment {
    display: flex;
    margin: 8px 0;

    .user-image {
        width: $avatar-diameter;
        height: $avatar-diameter;
        margin-right: $avatar-margin;
        flex-shrink: 0;
    }

    .user-name {
        font-weight: 600;
        margin-bottom: 4px;
    }
    .comment-actions {
        margin-top: 4px;
        button {
            margin-left: 8px;
        }
    }
}