wip: Saving work

app/[locale]/product/[handle]/page.tsx

@@ -9,6 +9,7 @@ import Label from 'components/label';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Price from 'components/price';
 import { ProductDescription } from 'components/product/product-description';
+import { ProductTastingNotes } from 'components/product/tasting-notes';
 import { VariantSelector } from 'components/product/variant-selector';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
@@ -72,6 +73,7 @@ export default async function ProductPage({
     handle: params.handle,
     language: params?.locale?.toUpperCase()
   });
+
   let otherImages: MediaImage[] = [];
   if (!!product) {
     otherImages = product.images
@@ -151,6 +153,10 @@ export default async function ProductPage({
             </div>
           </div>
 
+          <div>
+            <ProductTastingNotes product={product} />
+          </div>
+
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {!!otherImages &&
               otherImages?.length > 0 &&

components/product/tasting-notes.tsx

@@ -0,0 +1,35 @@
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import Image from 'next/image';
+
+export function ProductTastingNotes({ product }: { product: Product }) {
+  const notes = product?.notes?.value;
+  const imageUrl = product?.notesImage?.reference?.image?.url;
+  const imageWidth = product?.notesImage?.reference?.image?.width;
+  const imageHeight = product?.notesImage?.reference?.image?.height;
+  const imageAlt = product?.notesImage?.reference?.image?.altText;
+
+  if (!imageUrl && !imageWidth && !imageHeight) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+      {!!notes ? (
+        <div>
+          <Prose className="mb-6 text-lg leading-tight dark:text-white/[60%]" html={notes} />
+        </div>
+      ) : null}
+      {imageUrl && imageHeight && imageWidth && (
+        <div>
+          <Image
+            src={imageUrl}
+            width={imageWidth}
+            height={imageHeight}
+            alt={imageAlt || imageUrl}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

lib/shopify/types.ts

@@ -149,6 +149,14 @@ export type ShopifyProduct = {
   summary: {
     value: string;
   };
+  notes?: {
+    value?: string;
+  };
+  notesImage?: {
+    reference: {
+      image: Image;
+    };
+  };
   options: ProductOption[];
   priceRange: {
     maxVariantPrice: Money;