fix: make MoneyPrice and MoneyCompareAtPrice client components

packages/dev/src/components/MoneyCompareAtPrice.client.jsx

@@ -0,0 +1,14 @@
+import {Money} from '@shopify/hydrogen/client';
+
+export default function MoneyCompareAtPrice({money}) {
+  return (
+    <Money money={money}>
+      {({amount, currencyNarrowSymbol}) => (
+        <span className="line-through text-lg mr-2.5 text-gray-500">
+          {currencyNarrowSymbol}
+          {amount}
+        </span>
+      )}
+    </Money>
+  );
+}

packages/dev/src/components/MoneyPrice.client.jsx

@@ -0,0 +1,15 @@
+import {Money} from '@shopify/hydrogen/client';
+
+export default function MoneyPrice({money}) {
+  return (
+    <Money className="text-black text-md" money={money}>
+      {({amount, currencyNarrowSymbol, currencyCode}) => (
+        <>
+          {currencyCode}
+          {currencyNarrowSymbol}
+          {amount}
+        </>
+      )}
+    </Money>
+  );
+}

packages/dev/src/components/ProductCard.server.jsx

@@ -1,6 +1,8 @@
-import {Image, Money} from '@shopify/hydrogen';
+import {Image} from '@shopify/hydrogen';
 
 import {Link} from './Link.client';
+import MoneyCompareAtPrice from './MoneyCompareAtPrice.client';
+import MoneyPrice from './MoneyPrice.client';
 
 export default function ProductCard({product}) {
   const selectedVariant = product.variants.edges[0].node;
@@ -36,24 +38,9 @@ export default function ProductCard({product}) {
 
         <div className="flex ">
           {selectedVariant.compareAtPriceV2 && (
-            <Money money={selectedVariant.compareAtPriceV2}>
-              {({amount, currencyNarrowSymbol}) => (
-                <span className="line-through text-lg mr-2.5 text-gray-500">
-                  {currencyNarrowSymbol}
-                  {amount}
-                </span>
-              )}
-            </Money>
+            <MoneyCompareAtPrice money={selectedVariant.compareAtPriceV2} />
           )}
-          <Money className="text-black text-md" money={selectedVariant.priceV2}>
-            {({amount, currencyNarrowSymbol, currencyCode}) => (
-              <>
-                {currencyCode}
-                {currencyNarrowSymbol}
-                {amount}
-              </>
-            )}
-          </Money>
+          <MoneyPrice money={selectedVariant.priceV2} />
         </div>
       </Link>
     </div>