Thumbnail

import { Thumbnail } from '@/components/polaris';

function Example() {
    return (
        <Thumbnail
            src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-1_large.png"
            alt="Product image"
        />
    );
}

import { forwardRef, createElement } from 'react';
import type { JSX } from 'react';

export type ThumbnailProps = JSX.IntrinsicElements['s-thumbnail'];

/**
 * Thumbnail component - small image preview.
 *
 *
 * @example
 * <Thumbnail src="/product.jpg" alt="Product image" />
 */
export const Thumbnail = forwardRef<HTMLElement, ThumbnailProps>((props, ref) => {
    return createElement('s-thumbnail', { ref, ...props });
});

Thumbnail.displayName = 'Thumbnail';