woocommerce/plugins/woocommerce-admin/client/marketing/overview-multichannel/LearnMarketing/PostTile.tsx

50 lines
1.1 KiB
TypeScript

/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { Post } from './types';
type PostTileProps = {
post: Post;
};
export const PostTile: React.FC< PostTileProps > = ( { post } ) => {
return (
<a
className="woocommerce-marketing-learn-marketing-card__post"
href={ post.link }
target="_blank"
rel="noopener noreferrer"
onClick={ () => {
recordEvent( 'marketing_knowledge_article', {
title: post.title,
} );
} }
>
<div className="woocommerce-marketing-learn-marketing-card__post-img">
{ post.image && <img src={ post.image } alt="" /> }
</div>
<div className="woocommerce-marketing-learn-marketing-card__post-title">
{ post.title }
</div>
<div className="woocommerce-marketing-learn-marketing-card__post-description">
{
// translators: %s: author's name.
sprintf( __( 'By %s', 'woocommerce' ), post.author_name )
}
{ post.author_avatar && (
<img
src={ post.author_avatar.replace( 's=96', 's=32' ) }
alt=""
/>
) }
</div>
</a>
);
};