woocommerce/plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recom.../components/plugin-banner.tsx

73 lines
1.4 KiB
TypeScript

/**
* External dependencies
*/
import classNames from 'classnames';
/**
* Internal dependencies
*/
import './plugin-banner.scss';
type Feature = {
icon: string;
title?: string;
description: string;
};
type PluginBannerProps = {
logo?: {
image: string;
alt?: string;
};
description?: string;
layout?: 'single' | 'dual';
features: Array< Feature >;
children?: React.ReactNode;
};
export const PluginBanner = ( {
logo,
description,
layout = 'single',
features,
children,
}: PluginBannerProps ) => {
return (
<div
className={ classNames(
'woocommerce-task-shipping-recommendation__plugins-install',
layout
) }
>
{ logo && (
<div className="plugins-install__plugin-banner-image">
<img src={ logo.image } alt={ logo?.alt } />
</div>
) }
{ description && <p>{ description }</p> }
<div className="plugins-install__list">
{ features.map( ( feature: Feature, index ) => {
return (
<div
className="plugins-install__list-item"
key={ index }
>
<div className="plugins-install__list-icon">
<img src={ feature.icon } alt="" />
</div>
<div>
{ feature.title && (
<div>
<strong>{ feature.title }</strong>
</div>
) }
<div>{ feature.description }</div>
</div>
</div>
);
} ) }
</div>
{ children }
</div>
);
};