50 lines
1.1 KiB
TypeScript
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>
|
||
|
|
);
|
||
|
|
};
|