diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx index 8abbc38f2..ca96e02dd 100644 --- a/components/grid/tile.tsx +++ b/components/grid/tile.tsx @@ -7,11 +7,13 @@ export function GridTileImage({ active, labelPosition, labels, + hoverBorder, ...props }: { isInteractive?: boolean; active?: boolean; labelPosition?: 'bottom' | 'center'; + hoverBorder?: boolean; labels?: { title: string; amount: string; @@ -26,6 +28,7 @@ export function GridTileImage({ active !== undefined && active ? 'border-2 border-blue-600' : 'border-gray-200 dark:border-gray-800', + hoverBorder && 'hover:border-blue-600', { relative: labels } diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx index 0c0e907ed..02bc919af 100644 --- a/components/layout/product-grid-items.tsx +++ b/components/layout/product-grid-items.tsx @@ -17,6 +17,7 @@ export default function ProductGridItems({ products }: { products: Product[] }) amount: product.priceRange.maxVariantPrice.amount, currencyCode: product.priceRange.maxVariantPrice.currencyCode }} + hoverBorder={true} src={product.featuredImage?.url} width={600} height={600}