73 lines
1.4 KiB
TypeScript
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>
|
||
|
|
);
|
||
|
|
};
|