rsnext/examples/cms-datocms/components/more-stories.js
Shu Uesugi bf0ea49b02
DatoCMS Example (#10891)
* Copy cms-datocms

* Update package.json

* Desktop design

* Tablet support

* Mobile styles

* Update titles

* Add article page

* Minor tweaks

* Fix height issue

* Improve text colors

* Extract Alert and Footer components

* Extract avatar

* Add Date

* Extract container

* Fix capitalization

* Make it work with no backend

* Add paragraph styles

* Extract PostPreview

* Extract h2

* Extract more stories

* Refactor into more components

* Update tags

* Add missing key

* Add custom document for lang="" support

* Add dotenv

* Load data for the index page

* Limit posts

* Show post page

* Add markdown processing

* Forgot margin

* Add links

* Remove files and add fallback

* Add og:image

* Add favicon

* Add aria-label

* Fix prerender

* Learn more → read documentation

* Fix links and footer

* Desaturate using imgix

* Add preview secret

* Add preview support

* Fix preview code

* Exit preview mode

* Extract getAllPostsWithSlug

* Extract getAllPostsForHome

* Extract getPreviewPostBySlug

* Extract getPostAndMorePosts

* Extract constants

* Extract markdownToHtml

* Fix markdown styles

* Fix imgix for author

* Add README

* Add links to docs
2020-03-09 11:51:08 +01:00

24 lines
703 B
JavaScript

import PostPreview from '../components/post-preview'
export default function MoreStories({ posts }) {
return (
<section>
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
{posts.map(post => (
<PostPreview
key={post.slug}
title={post.title}
coverImage={post.coverImage}
date={post.date}
author={post.author}
slug={post.slug}
excerpt={post.excerpt}
/>
))}
</div>
</section>
)
}