student.component.tsx

import React from 'react';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import Typography from '@material-ui/core/Typography';
import * as innerClasses from './student.styles';
import { DownloadTxtFile } from 'common-app';

interface Props {
  room: string;
  log: string;
}

export const StudentComponent: React.FC<Props> = (props) => {
  const { room, log } = props;

  return (
    <main className={innerClasses.root}>
      <Typography
        className={innerClasses.sessionName}
        variant="body1"
        role="heading"
      >
        Session name: {room ?? ''}
      </Typography>
      <label className={innerClasses.label} htmlFor="session">
        Content
      </label>
      <TextareaAutosize
        id="session"
        rowsMax={30}
        rowsMin={30}
        className={innerClasses.textarea}
        value={log ?? ''}
      />
      <DownloadTxtFile />
    </main>
  );
};