oxen-website/components/article/Article.tsx

57 lines
1.8 KiB
TypeScript

import classNames from 'classnames';
import React from 'react';
import { IPost } from '../../types/cms';
import { ArticleContained } from '../ArticleContained';
import { Contained } from '../Contained';
import EmailSignup from '../EmailSignup';
import { Spacer } from '../Spacer';
import { TagRow } from '../TagRow';
import { ArticleSectionContent } from './sections/ArticleSectionContent';
import { ArticleSectionFeatureImage } from './sections/ArticleSectionFeatureImage';
import { ArticleSectionTitle } from './sections/ArticleSectionTitle';
import { ArticleSubtitleSection } from './sections/ArticleSubtitleSection';
import { ArticleWidgetAuthor } from './widgets/ArticleWidgetAuthor';
export function Article(props: IPost) {
const {
title,
subtitle,
author,
tags,
publishedDate,
featureImage,
description,
} = props;
// const { isMobile } = useContext(ScreenContext);
return (
<article>
<div className="flex flex-col items-center mt-10 mb-16 space-y-4">
<ArticleSectionFeatureImage featureImage={featureImage} title={title} />
<ArticleContained>
<div className="flex flex-col mb-6 space-y-6">
<ArticleSectionTitle title={title} />
<ArticleSubtitleSection subtitle={subtitle} />
<ArticleWidgetAuthor
author={author}
publishedDate={publishedDate}
/>
{/* Brendan requested that descriptions are only shown on cards. -t 2nd Mar 2021 */}
{/* <ArticleCallout>{description}</ArticleCallout> */}
</div>
<ArticleSectionContent {...props} />
<Spacer spaceY={4} />
<TagRow tags={tags} size="medium" />
<EmailSignup classes={classNames('mt-12', 'tablet:mt-12')} />
</ArticleContained>
</div>
</article>
);
}