Comment.js

CommentWithDefaultPrpps.js

import React from "react";
import styled from "react-emotion";
import { Flex, Box } from "grid-styled/emotion";
import Text from "./Text";
import Avatar from "./Avatar";

const Comment = ({ children, ...props }) => children(props);

Comment.defaultProps = {
  Wrapper: props => <Flex flexDirection="row" mb={"1rem"} {...props} />,
  Column: styled(Box)`
    & + & {
      margin-left: 0.25rem
    }
  `,
  Header: styled("header")``,
  Heading: styled("h3")`
    display: inline;
  `,
  SubHeading: styled("h4")`
    display: inline;
  `,
  Text,
  Footer: styled("footer")``,
  children: ({
    Wrapper,
    Column,
    Main,
    Header,
    Heading,
    SubHeading,
    Text,
    Footer,
  }) => (
    <Wrapper>
      <Column>
        <Avatar.Random />
      </Column>
      <Column>
        <Header>
          <Heading>Heading</Heading>
          {` `}
          <SubHeading>SubHeading</SubHeading>
        </Header>
        <Text>Text</Text>
        <Footer>Footer</Footer>
      </Column>
    </Wrapper>
  ),
};

export default Comment;