From c86d49f317038ba1a6e616cf72af0562e63d10f4 Mon Sep 17 00:00:00 2001
From: Sean <sean@goforward.group>
Date: Sun, 29 Mar 2026 07:37:46 -0400
Subject: [PATCH] feat: use ProductImage in ProductDetailPageClient

---
 components/parts/ProductDetailPageClient.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/parts/ProductDetailPageClient.tsx b/components/parts/ProductDetailPageClient.tsx
index d99ed80..6d343c7 100644
--- a/components/parts/ProductDetailPageClient.tsx
+++ b/components/parts/ProductDetailPageClient.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { ProductImage } from './ProductImage';
 import PlatformSwitcher from "./PlatformSwitcher";
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
@@ -149,14 +150,11 @@ export default function ProductDetailPageClient(props: {
             <div className="flex flex-col gap-6 md:flex-row">
               <div className="w-full md:w-72">
                 <div className="aspect-square overflow-hidden rounded-lg border border-zinc-800 bg-black/30">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  {p.imageUrl ? (
-                    <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
-                  ) : (
-                    <div className="h-full w-full grid place-items-center text-sm text-zinc-600">
-                      No image
-                    </div>
-                  )}
+                  <ProductImage
+                    src={p.imageUrl}
+                    alt={p.name}
+                    className="h-full w-full object-cover"
+                  />
                 </div>
               </div>