47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { ArticleCard } from './ArticleCard'
|
|
import { Pager } from './Pager'
|
|
import { CardGrid } from './CardGrid'
|
|
import { IArticle } from 'src/types'
|
|
|
|
export interface IArticleCardListProps {
|
|
articles: IArticle[]
|
|
nextPage: number | null
|
|
prevPage: number | null
|
|
}
|
|
|
|
export const ArticleCardList: React.FC<IArticleCardListProps> = ({ articles, nextPage, prevPage, ...props }) => (
|
|
<>
|
|
<CardGrid
|
|
style={{
|
|
marginBottom: 'var(--size-m)',
|
|
}}
|
|
>
|
|
{articles.map((article, i) => {
|
|
const preview = {
|
|
alt: article.title,
|
|
src: article.preview.src,
|
|
srcSet: article.preview.set,
|
|
}
|
|
|
|
const gridColumn = article.featured ? 'span 2' : 'auto'
|
|
|
|
return (
|
|
<ArticleCard
|
|
key={i}
|
|
article={article}
|
|
preview={preview as any}
|
|
style={{
|
|
gridColumn
|
|
}}
|
|
/>
|
|
)
|
|
})}
|
|
</CardGrid>
|
|
|
|
<Pager
|
|
nextHref={nextPage ? `/articles/${nextPage}` : null}
|
|
prevHref={prevPage ? `/articles/${prevPage}` : null}
|
|
/>
|
|
</>
|
|
)
|