react-softphone/src/Header.js

Webrtc Softphone React

import React from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core/styles'
import { Grid, Typography, Button } from '@material-ui/core'

const useStyles = makeStyles(() => ({
  root: {}
}))

function Header({ className, addAccount, ...rest }) {
  const classes = useStyles()
  const handleAddAccount = () => {
    addAccount()
  }
  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Grid
        alignItems='flex-end'
        container
        justify='space-between'
        spacing={3}
      >
        <Grid item>
          <Typography
            component='h2'
            gutterBottom
            variant='overline'
          >
            Management
          </Typography>
          <Typography
            component='h1'
            variant='h3'
          >
            Accounts
          </Typography>
        </Grid>
        <Grid item>
          <Button
            color='primary'
            variant='contained'
            onClick={handleAddAccount}

          >
            Add Account
          </Button>
        </Grid>
      </Grid>
    </div>
  )
}

Header.propTypes = {
  className: PropTypes.string
}

export default Header