113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
TagList,
|
|
SaveButton,
|
|
ReadingTime,
|
|
ReactionsCount,
|
|
CommentsCount,
|
|
} from './components';
|
|
import { articlePropTypes } from '../src/components/common-prop-types';
|
|
|
|
export const FeaturedArticle = ({
|
|
article,
|
|
isBookmarked,
|
|
reactionsIcon,
|
|
commentsIcon,
|
|
bookmarkClick,
|
|
}) => {
|
|
return (
|
|
<div>
|
|
<div
|
|
id="featured-story-marker"
|
|
data-featured-article={`articles-${article.id}`}
|
|
/>
|
|
<img
|
|
src={article.main_image}
|
|
style={{ display: 'none' }}
|
|
alt={article.title}
|
|
/>
|
|
<a
|
|
href={article.path}
|
|
id={`article-link-${article.id}`}
|
|
className="index-article-link"
|
|
aria-label="Main Story"
|
|
data-featured-article={`articles-${article.id}`}
|
|
/>
|
|
<div
|
|
className="single-article big-article"
|
|
data-content-user-id={article.user_id}
|
|
>
|
|
<a
|
|
href={article.path}
|
|
id={`article-link-${article.id}`}
|
|
className="index-article-link"
|
|
aria-label="Main Story"
|
|
data-featured-article={`articles-${article.id}`}
|
|
>
|
|
<div
|
|
className="picture image-final"
|
|
style={{
|
|
backgroundColor: article.main_image_background_hex_color,
|
|
backgroundImage: `url(${article.main_image})`,
|
|
}}
|
|
/>
|
|
<div className="content-wrapper">
|
|
<h3>{article.title}</h3>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href={`/${article.user.username}`}
|
|
className="featured-profile-button"
|
|
>
|
|
<img
|
|
className="featured-profile-pic"
|
|
src={article.user.profile_image_90}
|
|
alt={article.title}
|
|
/>
|
|
</a>
|
|
<div className="featured-user-name">
|
|
<a href={`/${article.user.username}`}>
|
|
{article.user.name} ・{' '}
|
|
<time dateTime={article.published_timestamp}>
|
|
{article.readable_publish_date}
|
|
</time>
|
|
<span
|
|
className="time-ago-indicator-initial-placeholder"
|
|
data-seconds={`${article.published_at_int}`}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<TagList tags={article.tag_list} className="featured-tags" />
|
|
<CommentsCount
|
|
count={article.comments_count}
|
|
articlePath={article.path}
|
|
icon={commentsIcon}
|
|
className="featured-engagement-count"
|
|
/>
|
|
<ReactionsCount article={article} icon={reactionsIcon} />
|
|
<ReadingTime
|
|
articlePath={article.path}
|
|
readingTime={article.reading_time}
|
|
/>
|
|
<SaveButton
|
|
article={article}
|
|
isBookmarked={isBookmarked}
|
|
onClick={bookmarkClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
FeaturedArticle.defaultProps = {
|
|
isBookmarked: false,
|
|
};
|
|
|
|
FeaturedArticle.propTypes = {
|
|
article: articlePropTypes.isRequired,
|
|
isBookmarked: PropTypes.bool,
|
|
reactionsIcon: PropTypes.string.isRequired,
|
|
commentsIcon: PropTypes.string.isRequired,
|
|
bookmarkClick: PropTypes.func.isRequired,
|
|
};
|