diff --git a/app/components/cart/cart.tsx b/app/components/cart/cart.tsx
index 5dbf9274..016747d5 100644
--- a/app/components/cart/cart.tsx
+++ b/app/components/cart/cart.tsx
@@ -1,7 +1,6 @@
import { Trash } from "@phosphor-icons/react";
import {
CartForm,
- Image,
Money,
type OptimisticCart,
OptimisticInput,
@@ -17,6 +16,7 @@ import { useRef } from "react";
import useScroll from "react-use/esm/useScroll";
import type { CartApiQueryFragment } from "storefront-api.generated";
import { Button } from "~/components/button";
+import { Image } from "~/components/image";
import { Link } from "~/components/link";
import { getImageAspectRatio } from "~/utils/image";
import { CartBestSellers } from "./cart-best-sellers";
@@ -268,7 +268,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
width={250}
height={250}
data={merchandise.image}
- className="object-cover object-center w-24 h-auto"
+ className="w-24 h-auto"
alt={merchandise.title}
aspectRatio={getImageAspectRatio(merchandise.image, "adapt")}
/>
diff --git a/app/components/customer/order-details.tsx b/app/components/customer/order-details.tsx
index 13a5d7f5..56809c52 100644
--- a/app/components/customer/order-details.tsx
+++ b/app/components/customer/order-details.tsx
@@ -1,6 +1,7 @@
import { ArrowLeft, Tag } from "@phosphor-icons/react";
import { useLoaderData } from "@remix-run/react";
-import { Image, Money } from "@shopify/hydrogen";
+import { Money } from "@shopify/hydrogen";
+import { Image } from "~/components/image";
import clsx from "clsx";
import { Link } from "~/components/link";
import { Section } from "~/components/section";
@@ -15,7 +16,7 @@ export function OrderDetails() {
for (let lineItem of lineItems) {
totalDiscount += lineItem.discountAllocations.reduce(
(acc, curr) => acc + Number.parseFloat(curr.allocatedAmount.amount),
- 0
+ 0,
);
}
@@ -167,7 +168,7 @@ export function OrderDetails() {
{ORDER_STATUS[fulfillmentStatus] || fulfillmentStatus}
diff --git a/app/components/customer/orders.tsx b/app/components/customer/orders.tsx
index 16f2ca58..d8043b69 100644
--- a/app/components/customer/orders.tsx
+++ b/app/components/customer/orders.tsx
@@ -1,4 +1,5 @@
-import { Image, flattenConnection } from "@shopify/hydrogen";
+import { flattenConnection } from "@shopify/hydrogen";
+import { Image } from "~/components/image";
import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
import type { OrderCardFragment } from "customer-account-api.generated";
import Link from "~/components/link";
@@ -56,7 +57,7 @@ function OrderCard({ order }: { order: OrderCardFragment }) {
diff --git a/app/components/layout/desktop-menu.tsx b/app/components/layout/desktop-menu.tsx
index 27052e3e..8e215c94 100644
--- a/app/components/layout/desktop-menu.tsx
+++ b/app/components/layout/desktop-menu.tsx
@@ -108,7 +108,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
resource?.image && children.length === 0 ? (
{items.map((item: NormalizedPredictiveSearchResultItem) => (
@@ -79,9 +79,7 @@ function SearchResultItem({
alt={image.altText ?? ""}
src={image.url}
width={200}
- height={200}
- aspectRatio={getImageAspectRatio(image, "adapt")}
- className="h-full w-full object-cover object-center animate-fade-in"
+ aspectRatio="1/1"
/>
)}
@@ -98,7 +96,7 @@ function SearchResultItem({
) : (
{title}
diff --git a/app/components/product/media-zoom.tsx b/app/components/product/media-zoom.tsx
index e89dcbe3..61a5d3e5 100644
--- a/app/components/product/media-zoom.tsx
+++ b/app/components/product/media-zoom.tsx
@@ -57,6 +57,7 @@ export function ZoomModal({
}
}
if (open) {
+ window.requestAnimationFrame(() => scrollToMedia(zoomMediaId));
window.addEventListener("keydown", handleKeyDown);
} else {
window.removeEventListener("keydown", handleKeyDown);
@@ -64,7 +65,7 @@ export function ZoomModal({
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
- }, [open, setZoomMediaId, nextMedia, prevMedia]);
+ }, [open, zoomMediaId, setZoomMediaId, nextMedia, prevMedia]);
return (
@@ -104,7 +105,7 @@ export function ZoomModal({
key={id}
id={`zoom-media--${mediaId}`}
className={cn(
- "relative",
+ "relative bg-gray-100",
"p-1 border rounded-md transition-colors cursor-pointer border-transparent !h-auto",
zoomMediaId === id && "border-line",
)}
diff --git a/app/components/product/product-media.tsx b/app/components/product/product-media.tsx
index b1e28fe0..3e920bae 100644
--- a/app/components/product/product-media.tsx
+++ b/app/components/product/product-media.tsx
@@ -181,7 +181,7 @@ export function ProductMedia(props: ProductMediaProps) {
className="overflow-visible rounded md:overflow-hidden pb-10 md:pb-0 md:[&_.swiper-pagination]:hidden"
>
{media.map((media, idx) => (
-
+
((props, ref) => {
{image && (
-
+
)}
diff --git a/app/sections/blogs.tsx b/app/sections/blogs.tsx
index cd45c0c7..d4c76a9f 100644
--- a/app/sections/blogs.tsx
+++ b/app/sections/blogs.tsx
@@ -1,8 +1,8 @@
import { useLoaderData } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
import { forwardRef } from "react";
import type { ArticleFragment, BlogQuery } from "storefront-api.generated";
+import { Image } from "~/components/image";
import { Link } from "~/components/link";
import { Section, type SectionProps, layoutInputs } from "~/components/section";
import { getImageLoadingPriority } from "~/utils/image";
@@ -84,7 +84,6 @@ function ArticleCard({
(
{showBanner && banner && (
(
height={collection.image.height || 400}
sizes="(max-width: 32em) 100vw, 45vw"
className={clsx([
- "w-full h-full object-cover",
"transition-all duration-300",
"will-change-transform scale-100 group-hover:scale-[1.05]",
])}
diff --git a/app/sections/hotspots/index.tsx b/app/sections/hotspots/index.tsx
index 87a51671..459d47ee 100644
--- a/app/sections/hotspots/index.tsx
+++ b/app/sections/hotspots/index.tsx
@@ -1,14 +1,14 @@
-import { Image } from "@shopify/hydrogen";
-import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
import type {
HydrogenComponentSchema,
WeaverseImage,
} from "@weaverse/hydrogen";
+import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
import { forwardRef } from "react";
import Heading, {
headingInputs,
type HeadingProps,
} from "~/components/heading";
+import { Image } from "~/components/image";
import Paragraph from "~/components/paragraph";
import type { SectionProps } from "~/components/section";
import { Section } from "~/components/section";
@@ -75,7 +75,7 @@ let Hotspots = forwardRef
((props, ref) => {
{children}
diff --git a/app/sections/hotspots/product-popup.tsx b/app/sections/hotspots/product-popup.tsx
index 8aede235..6e139217 100644
--- a/app/sections/hotspots/product-popup.tsx
+++ b/app/sections/hotspots/product-popup.tsx
@@ -1,9 +1,10 @@
-import { Image, Money } from "@shopify/hydrogen";
+import { Money } from "@shopify/hydrogen";
import type { MediaImage } from "@shopify/hydrogen/storefront-api-types";
import { IMAGES_PLACEHOLDERS } from "@weaverse/hydrogen";
import clsx from "clsx";
import type { CSSProperties } from "react";
import type { ProductQuery } from "storefront-api.generated";
+import { Image } from "~/components/image";
import { Link } from "~/components/link";
import type { HotspotsItemData } from "./item";
diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx
index dc5a7ea7..d83ef2ec 100644
--- a/app/sections/image-gallery/image.tsx
+++ b/app/sections/image-gallery/image.tsx
@@ -1,4 +1,3 @@
-import { Image } from "@shopify/hydrogen";
import type {
HydrogenComponentProps,
HydrogenComponentSchema,
@@ -8,44 +7,42 @@ import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import clsx from "clsx";
import { forwardRef } from "react";
+import { Image } from "~/components/image";
-let variants = cva(
- "h-[var(--image-height)] object-cover object-center w-full",
- {
- variants: {
- columnSpan: {
- 1: "col-span-1",
- 2: "col-span-2",
- 3: "col-span-3",
- 4: "col-span-4",
- },
- borderRadius: {
- 0: "",
- 2: "rounded-sm",
- 4: "rounded",
- 6: "rounded-md",
- 8: "rounded-lg",
- 10: "rounded-[10px]",
- 12: "rounded-xl",
- 14: "rounded-[14px]",
- 16: "rounded-2xl",
- 18: "rounded-[18px]",
- 20: "rounded-[20px]",
- 22: "rounded-[22px]",
- 24: "rounded-3xl",
- },
- hideOnMobile: {
- true: "hidden sm:block",
- false: "",
- },
+let variants = cva("h-[--image-height]", {
+ variants: {
+ columnSpan: {
+ 1: "col-span-1",
+ 2: "col-span-2",
+ 3: "col-span-3",
+ 4: "col-span-4",
},
- defaultVariants: {
- columnSpan: 1,
- borderRadius: 8,
- hideOnMobile: false,
+ borderRadius: {
+ 0: "",
+ 2: "rounded-sm",
+ 4: "rounded",
+ 6: "rounded-md",
+ 8: "rounded-lg",
+ 10: "rounded-[10px]",
+ 12: "rounded-xl",
+ 14: "rounded-[14px]",
+ 16: "rounded-2xl",
+ 18: "rounded-[18px]",
+ 20: "rounded-[20px]",
+ 22: "rounded-[22px]",
+ 24: "rounded-3xl",
+ },
+ hideOnMobile: {
+ true: "hidden sm:block",
+ false: "",
},
},
-);
+ defaultVariants: {
+ columnSpan: 1,
+ borderRadius: 8,
+ hideOnMobile: false,
+ },
+});
interface ImageGalleryItemProps
extends VariantProps,
@@ -63,8 +60,10 @@ let ImageGalleryItem = forwardRef(
{...rest}
className={clsx(variants({ columnSpan, borderRadius, hideOnMobile }))}
data-motion="slide-in"
+ loading="lazy"
data={data}
- sizes={`(min-width: 45em) 50vw, 100vw`}
+ width={1000}
+ sizes="(min-width: 45em) 50vw, 100vw"
/>
);
},
diff --git a/app/sections/image-with-text/image.tsx b/app/sections/image-with-text/image.tsx
index e443d496..7630ccbe 100644
--- a/app/sections/image-with-text/image.tsx
+++ b/app/sections/image-with-text/image.tsx
@@ -1,4 +1,3 @@
-import { Image } from "@shopify/hydrogen";
import {
type HydrogenComponentProps,
type HydrogenComponentSchema,
@@ -8,6 +7,7 @@ import {
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { forwardRef } from "react";
+import { Image } from "~/components/image";
import type { ImageAspectRatio } from "~/types/image";
import { cn } from "~/utils/cn";
diff --git a/app/sections/our-team/team-members.tsx b/app/sections/our-team/team-members.tsx
index 24df817d..d31d2c7b 100644
--- a/app/sections/our-team/team-members.tsx
+++ b/app/sections/our-team/team-members.tsx
@@ -1,6 +1,5 @@
import { GithubLogo, LinkedinLogo, XLogo } from "@phosphor-icons/react";
import { Link } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
import {
type HydrogenComponentProps,
type HydrogenComponentSchema,
@@ -9,6 +8,7 @@ import {
} from "@weaverse/hydrogen";
import { forwardRef } from "react";
import type { OurTeamQuery } from "storefront-api.generated";
+import { Image } from "~/components/image";
type MemberType = {
name: string;
@@ -49,7 +49,6 @@ let TeamMembers = forwardRef(
className="w-full h-auto sm:w-48 sm:h-48"
aspectRatio="1/1"
width={500}
- height={500}
/>
)}
diff --git a/app/sections/related-articles.tsx b/app/sections/related-articles.tsx
index d6ebd868..b92a7b6e 100644
--- a/app/sections/related-articles.tsx
+++ b/app/sections/related-articles.tsx
@@ -1,11 +1,11 @@
import { Await, Link, useLoaderData } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
import type {
HydrogenComponentProps,
HydrogenComponentSchema,
} from "@weaverse/hydrogen";
import { Suspense, forwardRef } from "react";
import type { ArticleFragment } from "storefront-api.generated";
+import { Image } from "~/components/image";
import { Skeleton } from "~/components/skeleton";
import { getImageLoadingPriority } from "~/utils/image";
@@ -98,7 +98,6 @@ function ArticleCard({
(