rsnext/examples/cms-takeshape/components/cover-image.js
Shu Uesugi a63ac3e715
CMS TakeShape Example (#11038)
* TakeShape Example

* Fix preview logic

* Update README

* Fix broken link

* Be more clear with the relationship field

* Use latest next.js for cms examples

* Only show enabled items

* Ignore current slug

* Fix queries

* Add takeshape demo

* Added link to blog-starter

Co-authored-by: Luis Alvarez D <luis@zeit.co>
2020-03-19 17:30:37 -05:00

30 lines
685 B
JavaScript

import cn from 'classnames'
import Link from 'next/link'
import { getImageUrl } from 'takeshape-routing'
export default function CoverImage({ title, coverImage, slug }) {
const image = (
<img
src={getImageUrl(coverImage.path, {
fm: 'jpg',
fit: 'crop',
w: 2000,
h: 1000,
})}
className={cn('shadow-small', {
'hover:shadow-medium transition-shadow duration-200': slug,
})}
/>
)
return (
<div className="-mx-5 sm:mx-0">
{slug ? (
<Link as={`/posts/${slug}`} href="/posts/[slug]">
<a aria-label={title}>{image}</a>
</Link>
) : (
image
)}
</div>
)
}