daily-examples/custom/shared/components/MessageCard/MessageCard.js

47 lines
1.0 KiB
JavaScript

import React from 'react';
import Button from '@custom/shared/components/Button';
import {
Card,
CardBody,
CardFooter,
CardHeader,
} from '@custom/shared/components/Card';
import PropTypes from 'prop-types';
export const MessageCard = ({
header,
children,
error = false,
hideBack = false,
onBack,
}) => (
<Card className={error ? 'error' : ''}>
{header && <CardHeader>{header}</CardHeader>}
{children && <CardBody>{children}</CardBody>}
{!hideBack && (
<CardFooter>
{onBack ? (
<Button onClick={() => onBack()}>Go back</Button>
) : (
<Button onClick={() => window.location.reload()}>Go back</Button>
)}
</CardFooter>
)}
<style jsx>{`
:global(.card.error) {
border: 3px solid var(--red-default);
}
`}</style>
</Card>
);
MessageCard.propTypes = {
header: PropTypes.string,
children: PropTypes.node,
error: PropTypes.bool,
onBack: PropTypes.func,
hideBack: PropTypes.bool,
};
export default MessageCard;