Youtube AddComment component

AddComment.js

import React from 'react';
import './AddComment.scss';
import {Form, Image, TextArea} from "semantic-ui-react";

export function AddComment() {
  return (
    <div className='add-comment'>
      <Image className='user-image' src='http://via.placeholder.com/48x48' circular/>
      <Form>
        <Form.TextArea control={TextArea} autoHeight placeholder='Add a public comment' />
      </Form>
    </div>
  );
}

AddComment.scss

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

.add-comment {
  display: flex;
  margin-top: 16px;
  margin-bottom: 16px;

  form {
    flex: 1;
  }

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

shared.scss

/* old content unchanged*/
$avatar-diameter: 48px;
$avatar-margin: 10px;

import React from 'react';
import './AddComment.scss';
import {Form, Image, TextArea} from "semantic-ui-react";

export function AddComment() {
return (

<Form.TextArea control={TextArea} autoHeight placeholder='Add a public comment' />

);
}