88ac118d1c
# Demo: https://next-blog-demo.enterspeed.com/ Added `with-enterspeed` to examples. Linked to `with-enterspeed` in related documentation: - docs/advanced-features/preview-mode.md - docs/basic-features/data-fetching/overview.md - docs/basic-features/pages.md Linked to `with-enterspeed` in related examples: - examples/blog-starter/README.md - examples/cms-agilitycms/README.md - examples/cms-builder-io/README.md - examples/cms-buttercms/README.md - examples/cms-contentful/README.md - examples/cms-cosmic/README.md - examples/cms-datocms/README.md - examples/cms-drupal/README.md - examples/cms-ghost/README.md - examples/cms-graphcms/README.md - examples/cms-kontent/README.md - examples/cms-prepr/README.md - examples/cms-prismic/README.md - examples/cms-sanity/README.md - examples/cms-storyblok/README.md - examples/cms-strapi/README.md - examples/cms-takeshape/README.md - examples/cms-tina/README.md - examples/cms-umbraco-heartcore/README.md
34 lines
697 B
TypeScript
34 lines
697 B
TypeScript
import cn from 'classnames'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
type Props = {
|
|
title: string
|
|
coverImage: string
|
|
slug?: string
|
|
}
|
|
|
|
export default function CoverImage({ title, coverImage, slug }: Props) {
|
|
const image = (
|
|
<Image
|
|
width={2000}
|
|
height={1000}
|
|
alt={`Cover Image for ${title}`}
|
|
src={coverImage}
|
|
className={cn('shadow-small', {
|
|
'hover:shadow-medium transition-shadow duration-200': slug,
|
|
})}
|
|
/>
|
|
)
|
|
return (
|
|
<div className="sm:mx-0">
|
|
{slug ? (
|
|
<Link href={`/posts${slug}`}>
|
|
<a aria-label={title}>{image}</a>
|
|
</Link>
|
|
) : (
|
|
image
|
|
)}
|
|
</div>
|
|
)
|
|
}
|