@unwrapdev/library/slices/UImage/index.js

UI Kit + Utils Library.

import React from 'react'
import UImageLib from '../../dist/UImage/UImage'
import { PrismicRichText } from '@prismicio/react'

/**
 * @typedef {import("@prismicio/client").Content.UImageSlice} UImageSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<UImageSlice>} UImageProps
 * @param { UImageProps }
 */
const UImage = ({ slice, classes = undefined }) => (
    <figure>
        <UImageLib
            src={slice.primary.src}
            alt={slice.primary.alt}
            format={slice.primary.format}
            width={slice.primary.width ?? '100%'}
            height={slice.primary.height ?? '100%'}
            classes={classes}
        />
        {slice.primary.caption && (
            <figcaption className="mt-3 max-w-3xl text-sm italic text-slate-500">
                <PrismicRichText field={slice.primary.caption} />
            </figcaption>
        )}
    </figure>
)

export default UImage