Media

We've created this component to create nice comments like ui components especially for blogs. You can see how it looks on a Blog Page here.

Styles

You will find the styles for this component inside:
styles/jss/nextjs-material-kit-pro/components/mediaStyle.js

Example

Tina Andrew · 7 minutes ago

Chance too good. God level bars. I'm so proud of @LifeOfDesiigner #1 song in the country. Panda! Don't be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!

Reply 243

import React from "react";
import {Link} from "react-router-dom";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
// @material-ui/icons
import Reply from "@material-ui/icons/Reply";
import Favorite from "@material-ui/icons/Favorite";
// core components
import Media from "components/Media/Media.js";
import Button from "components/CustomButtons/Button.js";

import sectionCommentsStyle from "styles/jss/nextjs-material-kit-pro/pages/blogPostSections/sectionCommentsStyle.js";

const useStyles = makeStyles(sectionCommentsStyle);

export default function MediaDocs() {
  const classes = useStyles();
  return (
    <Media
      avatar="/img/faces/card-profile4-square.jpg"
      title={
        <span>
          Tina Andrew <small>· 7 minutes ago</small>
        </span>
      }
      body={
        <p className={classes.color555}>
          Chance too good. God level bars. I'm so proud of
          @LifeOfDesiigner #1 song in the country. Panda! Don't be
          scared of the truth because we need to restart the human
          foundation in truth I stand with the most humility. We are so
          blessed!
        </p>
      }
      footer={
        <div>
          <Tooltip
            id="tooltip-tina"
            title="Reply to comment"
            placement="top"
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="primary"
              simple
              className={classes.footerButtons}
            >
              <Reply className={classes.footerIcons} /> Reply
            </Button>
          </Tooltip>

          <Button
            color="danger"
            simple
            className={classes.footerButtons}
          >
            <Favorite className={classes.footerIcons} /> 243
          </Button>
        </div>
      }
    />
  );
};

Props

Media.defaultProps = {
  avatarLink: "#pablo",
  avatarAlt: "..."
};

Media.propTypes = {
  avatarLink: PropTypes.string,
  avatar: PropTypes.string,
  avatarAlt: PropTypes.string,
  title: PropTypes.node,
  body: PropTypes.node,
  footer: PropTypes.node,
  innerMedias: PropTypes.arrayOf(PropTypes.object)
};