Alert content for an Alert Snackbar

content.tsx

// -- 1 --
import { IconButton, SnackbarContent } from '@material-ui/core';
import { amber, green } from '@material-ui/core/colors';
import { createStyles, Theme, withStyles } from '@material-ui/core/styles';
import { ClassNameMap } from '@material-ui/core/styles/withStyles';
import CloseIcon from '@material-ui/icons/Close';
import React, { StatelessComponent } from 'react';
import alertsStore from './store';
import { Alert } from './types';

// -- 2 --
const styles = ({ palette }: Theme) =>
  // -- 3 --
  createStyles<Alert['kind']>({
    success: {
      backgroundColor: green[600],
    },
    error: {
      backgroundColor: palette.error.dark,
    },
    info: {
      backgroundColor: palette.primary.dark,
    },
    warn: {
      backgroundColor: amber[700],
    },
  });

interface Props {
  // -- 4 --
  alert: Alert;
  // -- 5 --
  classes?: ClassNameMap;
}

const AlertContent: StatelessComponent<Props> = ({ alert, classes }) => {
  // -- 6 --
  classes = classes ? classes : {};
  return (
    <SnackbarContent
      // -- 7 --
      className={classes[alert.kind]}
      // -- 8 --
      message={<div>{alert.message}</div>}
      // -- 9 --
      action={[
        <IconButton key="close" aria-label="Close" color="inherit" onClick={alertsStore.hide}>
          <CloseIcon />
        </IconButton>,
      ]}
    />
  );
};

// -- 10 --
export default withStyles(styles)(AlertContent);