docbrown/app/javascript/articles/PodcastArticle.jsx
Nick Taylor 5e677daac1
Homepage feed components (#6052)
* wip - <PodcastArticle /> component.

* Added filler user avatar for other article types.

* Added <LoadingArticle /> component.

* wip

* wip on <Article /> component.

* Added <Article /> component to barrel file.

* Deleted assets from dummy storybook assets folder.

* Updated podcast article story avatar.

* More work on <Article /> component.

* Refactoring Storybook stories.

* Refactored so main component is just the <Article /> component.

* Added a missing video article property.

* Some refactoring of <Article /> component.

* Added Storybook knobs addon.

* Now <Article /> component supports an isBookmarked prop.

* Fixed podcast Storybook story.

* Made the knobs Storybook addon the first tab

* Added more <Article /> Storybook stories.

* More <Article /> component tweaks.

* Added publish time to <Article /> component stories.

* Made the timeAgo function compatible with Preact.

* Added loading="lazy" attribute to <img /> in <Article /> component.

* Added <Article /> Storybook story for past published date.

* Fixed publish date for <Article /> story data.

* Scrapped random avatars.

* Added snapshots for <Article /> component.

* Added snapshots for <LoadingArticle /> component.

* Now test article entities are shared.

* Fixed some wording of Storybook stories.

* Breaking up Article.jsx to make codeclimate happy.

* Now <Article /> component receives icon props.

* Added knobs for <Article /> icon props.

* Added *.stories.jsx to codeclimate exclusion list.

* Added **/*.stories.jsx to codeclimate exclusion list.

* Alright now we have the good glob for excluding Storybook from codeclimate 😆

* Added org headline changes from low hanging fruit PR.

* Updated <Article /> snapshot for org headline.
2020-02-19 11:39:13 -06:00

34 lines
1 KiB
JavaScript

import { h } from 'preact';
import { articlePropTypes } from '../src/components/common-prop-types/article-prop-types';
export const PodcastArticle = ({ article }) => {
return (
<div className="single-article single-article-small-pic single-article-single-podcast">
<div className="small-pic">
<a href={`/${article.podcast.slug}`} className="small-pic-link-wrapper">
<img src={article.podcast.image_url} alt={article.podcast.title} />
</a>
</div>
<a
href={article.path}
className="small-pic-link-wrapper index-article-link"
id={`article-link-${article.id}`}
>
<div className="content">
<h3>
<span className="tag-identifier">podcast</span>
{article.title}
</h3>
</div>
</a>
<h4>
<a href={`/${article.podcast.slug}`}>{article.podcast.title}</a>
</h4>
</div>
);
};
// TODO: Move these out into common-prop-types
PodcastArticle.propTypes = {
article: articlePropTypes.isRequired,
};