32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
import Image from 'next/image'
|
|
import { shimmer, toBase64 } from '../utils'
|
|
|
|
export default function CardImage({ isTrending, src, alt }) {
|
|
return (
|
|
<div className='relative w-full rounded-lg'>
|
|
<div
|
|
className={
|
|
isTrending
|
|
? 'relative h-[140px] w-[240px] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-app-dark-blue after:opacity-50 after:content-[""] sm:h-[230px] sm:w-[470px]'
|
|
: 'relative h-[133px] md:h-[140px] lg:h-[174px]'
|
|
}>
|
|
<Image
|
|
className='rounded-lg'
|
|
src={src}
|
|
alt={alt}
|
|
layout='fill'
|
|
objectFit='cover'
|
|
placeholder='blur'
|
|
blurDataURL={`data:image/svg+xml;base64,${toBase64(
|
|
shimmer(240, 140)
|
|
)}`}
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
{/* TODO: Add this back only after the bookmark feature is implemented */}
|
|
{/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-app-pure-white hover:opacity-100">
|
|
<IconBookmarkEmpty className="group-hover:app-transition fill-transparent stroke-app-pure-white group-hover:stroke-black" />
|
|
</div> */}
|
|
</div>
|
|
)
|
|
}
|