woocommerce/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx

60 lines
1.2 KiB
TypeScript

/**
* External dependencies
*/
import classnames from 'classnames';
/**
* Internal dependencies
*/
import { CardBody } from '~/marketing/components';
import './PluginCardBody.scss';
type PluginCardBodyProps = {
className?: string;
icon: JSX.Element;
name: string;
/**
* WooCommerce's Pill component to be rendered beside the name.
*/
pills?: Array< JSX.Element >;
description: React.ReactNode;
button?: JSX.Element;
};
/**
* Renders a CardBody layout component to display plugin info and button.
*/
export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
className,
icon,
name,
pills,
description,
button,
} ) => {
return (
<CardBody
className={ classnames(
'woocommerce_marketing_plugin_card_body',
className
) }
>
<div className="woocommerce_marketing_plugin_card_body__icon">
{ icon }
</div>
<div className="woocommerce_marketing_plugin_card_body__details">
<div className="woocommerce_marketing_plugin_card_body__details-name">
{ name }
{ pills }
</div>
<div className="woocommerce_marketing_plugin_card_body__details-description">
{ description }
</div>
</div>
{ button }
</CardBody>
);
};