CardHeader.js

import React, { isValidElement } from "react";
import {
  Divider,
  CardHeader as MaterialCardHeader,
  IconButton,
} from "@material-ui/core";
import PropTypes from "prop-types";
import RenderActions from "@components/renderActions";
import Typography from "@components/typography";
import isEmpty from "@helpers/isEmpty";
import clsx from "clsx";
import CloseIcon from "@material-ui/icons/Close";

import styles from "./styles.js";

/**
 * Title of the Card.
 * @param {string} title - Card title
 */
const CardTitle = ({ title }) => {
  return (
    <>
      {isValidElement(title) ? (
        title
      ) : (
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography variant="h5" color={"textPrimary"} noWrap>
            {title}
          </Typography>

          <IconButton onClick={() => console.log("close")}>
            <CloseIcon />
          </IconButton>
        </div>
      )}
    </>
  );
};

/**
 * Header of the Card.
 * @param {(string|ReactNode)} title - Title of the Card.
 * @param {(string|ReactNode)} subtitle - Description below the card title.
 * @param {(string|ReactNode)} avatar - The image of a user or icon to the left of the title.
 * @param {onClick} onClick - Event onClick
 */
const CardHeader = (props) => {
  const { title, subtitle, avatar, actions = [], onClick, className } = props;

  const classes = styles;
  const hasActions = actions.length >= 1;

  return (
    <>
      <MaterialCardHeader
        title={!isEmpty(title) && <CardTitle title={title} />}
        subheader={subtitle}
        classes={clsx(classes, className)}
        onClick={onClick}
        avatar={!isEmpty(avatar) && avatar}
        className={className}
        action={hasActions && <RenderActions actions={actions} />}
      />

      <Divider />
    </>
  );
};

export default CardHeader;