import Image from 'next/image' ; import { FilledImageFieldImage } from '@prismicio/types' ; import { classNames } from '@weco/common/utils/classnames' ; import { Breakpoint , sizes as breakpointSizes , } from '@weco/common/views/themes/config' ; type BreakpointSizes = Partial < Record < Breakpoint , number > > ; type Props = { image : FilledImageFieldImage ; sizes ? : BreakpointSizes ; width ? : number ; height ? : number ; } ; export function convertBreakpointSizesToSizes ( sizes ) { return Object . entries ( sizes ) . map ( ( [ breakpoint , ratio ] ) => { const breakpointSize = breakpointSizes [ breakpoint ] ; const size = breakpoint === 'xlarge' ? `${ breakpointSize * ratio }px` : `${ 100 * ratio }vw` ; return `(min-width: ${ breakpointSize }px) ${ size }` ; } ) ; } /**
 * This is based on the imgix loader as next has that built in
 * but we that is configured in the next app, so this will
 * make it run in places like Cardigan and allows us to work with things
 * like prismic using `rect` for crops
 */ const prismicLoader = ( { src , width , quality } ) => { const url = new URL ( src ) ; const searchParams = new URLSearchParams ( ) ; searchParams . set ( `w` , width ) ; searchParams . set ( `auto` , 'compress,format' ) ; searchParams . set ( `rect` , url . searchParams . get ( 'rect' ) || '' ) ; searchParams . set ( `q` , quality || 75 ) ; return `${ url . origin }${ url . pathname }?${ searchParams . toString ( ) }` ; } ; /**
 * the intention here is to become part of the new defacto image component on the site
 * usurping UiImage which has reached a state where it is so bloated it is hard to refactor.
 * This is aimed solely at the Prismic image rendering for now.
 */ const PrismicImage = ( { image , sizes , width , height } ) => { const sizesString = sizes ? convertBreakpointSizesToSizes ( sizes ) . join ( ', ' ) : undefined ; return ( < Image width = { width ?? image . dimensions . width } height = { height ?? image . dimensions . height } layout = "responsive" className = { classNames ( { 'image bg-charcoal font-white' : true , } ) } sizes = { sizesString } src = { image . url } alt = { image . alt || '' } loader = { prismicLoader } / > ) ; } ; export default PrismicImage ;