49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
---
|
|
import type { ComponentProps } from 'react'
|
|
|
|
import { Picture } from 'astro:assets'
|
|
|
|
import defaultServiceImage from '../assets/fallback-service-image.jpg'
|
|
import { cn } from '../lib/cn'
|
|
|
|
const fallbackImages = {
|
|
service: defaultServiceImage,
|
|
} as const satisfies Record<string, typeof defaultServiceImage>
|
|
|
|
type Props = Omit<ComponentProps<typeof Picture>, 'src'> & {
|
|
src: ComponentProps<typeof Picture>['src'] | null | undefined
|
|
fallback?: keyof typeof fallbackImages
|
|
}
|
|
|
|
const {
|
|
src,
|
|
formats = ['avif', 'webp'],
|
|
fallback = undefined as keyof typeof fallbackImages | undefined,
|
|
height,
|
|
width,
|
|
pictureAttributes,
|
|
...props
|
|
} = Astro.props
|
|
|
|
const fallbackImage = fallback ? fallbackImages[fallback] : undefined
|
|
---
|
|
|
|
{/* eslint-disable @typescript-eslint/no-explicit-any */}
|
|
{
|
|
!!(src ?? fallbackImage) && (
|
|
<Picture
|
|
src={
|
|
typeof src === 'string' ? new URL(src, Astro.url).href : ((src ?? fallbackImage) as unknown as string)
|
|
}
|
|
formats={formats}
|
|
height={height ? Number(height) * 2 : undefined}
|
|
width={width ? Number(width) * 2 : undefined}
|
|
pictureAttributes={{
|
|
...pictureAttributes,
|
|
class: cn('shrink-0', pictureAttributes?.class),
|
|
}}
|
|
{...(props as any)}
|
|
/>
|
|
)
|
|
}
|