24 lines
519 B
TypeScript
24 lines
519 B
TypeScript
import type {ProductVariantFragment} from 'storefrontapi.generated';
|
|
import {Image} from '@shopify/hydrogen';
|
|
|
|
export function ProductImage({
|
|
image,
|
|
}: {
|
|
image: ProductVariantFragment['image'];
|
|
}) {
|
|
if (!image) {
|
|
return <div className="product-image" />;
|
|
}
|
|
return (
|
|
<div className="product-image">
|
|
<Image
|
|
alt={image.altText || 'Product Image'}
|
|
aspectRatio="1/1"
|
|
data={image}
|
|
key={image.id}
|
|
sizes="(min-width: 45em) 50vw, 100vw"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|