more product page design

app/product/[handle]/page.tsx

@@ -2,14 +2,11 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
-import { AddToCart } from 'components/cart/add-to-cart';
 import Grid from 'components/grid';
 import Footer from 'components/layout/footer';
 import ProductGridItems from 'components/layout/product-grid-items';
-import Price from 'components/price';
 import { Gallery } from 'components/product/gallery';
-import { VariantSelector } from 'components/product/variant-selector';
-import Prose from 'components/prose';
+import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
@@ -77,19 +74,16 @@ export default async function ProductPage({ params }: { params: { handle: string
   };
 
   return (
-    <div>
+    <div className="px-4">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="lg:grid lg:grid-cols-6">
+      <div className="rounded-lg border bg-white lg:grid lg:grid-cols-6">
         <div className="lg:col-span-4">
           <Gallery
-            title={product.title}
-            amount={product.priceRange.maxVariantPrice.amount}
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
             images={product.images.map((image: Image) => ({
               src: image.url,
               altText: image.altText
@@ -98,25 +92,7 @@ export default async function ProductPage({ params }: { params: { handle: string
         </div>
 
         <div className="p-6 lg:col-span-2">
-          <div className="mb-6 flex flex-col border-b pb-6 dark:border-gray-700">
-            <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
-            <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
-              <Price
-                amount={product.priceRange.maxVariantPrice.amount}
-                currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-              />
-            </div>
-          </div>
-          <VariantSelector options={product.options} variants={product.variants} />
-
-          {product.descriptionHtml ? (
-            <Prose
-              className="mb-6 text-sm leading-tight dark:text-white/[60%]"
-              html={product.descriptionHtml}
-            />
-          ) : null}
-
-          <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+          <ProductDescription product={product} />
         </div>
       </div>
       <Suspense>

components/product/gallery.tsx

@@ -1,22 +1,11 @@
 'use client';
 
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { GridTileImage } from 'components/grid/tile';
+import Image from 'next/image';
 import { useState } from 'react';
 
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-import { GridTileImage } from 'components/grid/tile';
-
-export function Gallery({
-  title,
-  amount,
-  currencyCode,
-  images
-}: {
-  title: string;
-  amount: string;
-  currencyCode: string;
-  images: { src: string; altText: string }[];
-}) {
+export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
   const [currentImage, setCurrentImage] = useState(0);
 
   function handleNavigate(direction: 'next' | 'previous') {
@@ -34,37 +23,43 @@ export function Gallery({
     <div className="h-full">
       <div className="relative h-full max-h-[600px] overflow-hidden">
         {images[currentImage] && (
-          <GridTileImage
-            src={images[currentImage]?.src as string}
-            alt={images[currentImage]?.altText as string}
-            width={600}
+          <Image
+            className="relative h-full w-full object-contain"
             height={600}
-            isInteractive={false}
-            priority={true}
-            labels={{
-              title,
-              amount,
-              currencyCode
-            }}
+            width={600}
+            alt={images[currentImage]?.altText as string}
+            src={images[currentImage]?.src as string}
           />
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
-            <button
+          <div className="absolute bottom-[15%] flex w-full justify-center">
+            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 px-6 text-gray-500 backdrop-blur">
+              <button
+                aria-label="Previous product image"
+                onClick={() => handleNavigate('previous')}
+              >
+                <ArrowLeftIcon className="h-5" />
+              </button>
+              <div className="mx-6 h-6 w-px bg-gray-400"></div>
+              <button aria-label="Next product image" onClick={() => handleNavigate('next')}>
+                <ArrowRightIcon className="h-5" />
+              </button>
+              {/* <button
               aria-label="Previous product image"
               className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
               onClick={() => handleNavigate('previous')}
             >
-              <ChevronLeftIcon className="h-6" />
+              <ArrowLeftIcon className="h-6" />
             </button>
             <button
               aria-label="Next product image"
               className={clsx(buttonClassName)}
               onClick={() => handleNavigate('next')}
             >
-              <ChevronRightIcon className="h-6" />
-            </button>
+              <ArrowRightIcon className="h-6" />
+            </button> */}
+            </div>
           </div>
         ) : null}
       </div>

components/product/product-description.tsx

@@ -0,0 +1,31 @@
+import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import { VariantSelector } from './variant-selector';
+
+export function ProductDescription({ product }: { product: Product }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-col border-b pb-6 dark:border-gray-700">
+        <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
+          <Price
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+          />
+        </div>
+      </div>
+      <VariantSelector options={product.options} variants={product.variants} />
+
+      {product.descriptionHtml ? (
+        <Prose
+          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
+          html={product.descriptionHtml}
+        />
+      ) : null}
+
+      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+    </>
+  );
+}