forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
cover-image.js
39 lines (37 loc) · 972 Bytes
/
cover-image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import cn from 'classnames'
import Image from 'next/future/image'
import Link from 'next/link'
import { urlForImage } from '../lib/sanity'
export default function CoverImage({ title, slug, image: source, priority }) {
const image = source?.asset?._ref ? (
<div
className={cn('shadow-small', {
'hover:shadow-medium transition-shadow duration-200': slug,
})}
>
<Image
className="w-full h-auto"
layout="responsive"
width={2000}
height={1000}
alt={`Cover Image for ${title}`}
src={urlForImage(source).height(1000).width(2000).url()}
sizes="100vw"
priority={priority}
/>
</div>
) : (
<div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
)
return (
<div className="sm:mx-0">
{slug ? (
<Link href={`/posts/${slug}`}>
<a aria-label={title}>{image}</a>
</Link>
) : (
image
)}
</div>
)
}