wip: Saving work

app/[locale]/page.tsx

@@ -41,7 +41,7 @@ export default async function HomePage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} />
-      <div className="pt-48">
+      <div className="pt-12 md:pt-48">
         <ThreeItemGrid lang={locale} />
       </div>
       <div className="py-48">

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

@@ -33,7 +33,7 @@ export default async function ProductLayout({
 
   return (
     <div>
-      <Navbar cart={cart} locale={locale} />
+      <Navbar cart={cart} locale={locale} compact />
       {children}
       <Suspense>
         <Footer cart={cart} />

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

@@ -2,22 +2,29 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 
+import { AddToCart } from 'components/cart/add-to-cart';
 import { GridTileImage } from 'components/grid/tile';
-import { Gallery } from 'components/product/gallery';
+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 { VariantSelector } from 'components/product/variant-selector';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
-import { Image } from 'lib/shopify/types';
+import { Image as MediaImage, Product } from 'lib/shopify/types';
+import Image from 'next/image';
 import Link from 'next/link';
-
 export const runtime = 'edge';
 
 export async function generateMetadata({
   params
 }: {
-  params: { handle: string };
+  params: { handle: string; locale?: SupportedLocale };
 }): Promise<Metadata> {
-  const product = await getProduct({ handle: params.handle });
+  const product: Product | undefined = await getProduct({
+    handle: params.handle,
+    language: params?.locale?.toUpperCase()
+  });
 
   if (!product) return notFound();
 
@@ -50,8 +57,19 @@ export async function generateMetadata({
   };
 }
 
-export default async function ProductPage({ params }: { params: { handle: string } }) {
-  const product = await getProduct({ handle: params.handle });
+export default async function ProductPage({
+  params
+}: {
+  params: { handle: string; locale?: SupportedLocale };
+}) {
+  const product = await getProduct({
+    handle: params.handle,
+    language: params?.locale?.toUpperCase()
+  });
+  let otherImages: MediaImage[] = [];
+  if (!!product) {
+    otherImages = product.images.filter((image) => image?.url !== product.featuredImage?.url);
+  }
 
   if (!product) return notFound();
 
@@ -80,24 +98,69 @@ export default async function ProductPage({ params }: { params: { handle: string
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="mx-auto max-w-screen-xl px-4 py-24">
-        <div className="flex flex-col p-8 md:p-12 lg:flex-row lg:space-x-6">
-          <div className="h-full w-full basis-full lg:basis-4/6">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
+      <div className="mx-auto max-w-screen-xl py-24">
+        <div className="flex flex-col space-y-12">
+          <div className="relative aspect-square h-full w-full">
+            <Image
+              src={product.featuredImage?.url}
+              alt={product.featuredImage?.altText}
+              height={product.featuredImage.height}
+              width={product.featuredImage.width}
+              className="h-full w-full object-cover"
             />
           </div>
 
-          <div className="basis-full lg:basis-2/6">
-            <ProductDescription product={product} />
+          <div className="flex flex-col space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+            <div className="md:w-1/2">
+              <h1 className="font-multilingual mb-2 text-5xl">{product.title}</h1>
+            </div>
+            <div className="md:w-1/2">
+              <div className="flex flex-col space-y-6">
+                <div className="mb-6 flex flex-col border-t border-white/20 pt-6">
+                  <div className="font-multilingual mr-auto flex w-auto flex-row items-end space-x-4 text-4xl text-white">
+                    <Price
+                      amount={product.priceRange.maxVariantPrice.amount}
+                      currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+                    />
+                    <div className="text-xl">tax incl.</div>
+                  </div>
+                </div>
+
+                <div className="max-w-sm">
+                  <VariantSelector options={product.options} variants={product.variants} />
+
+                  <AddToCart
+                    variants={product.variants}
+                    availableForSale={product.availableForSale}
+                  />
+                </div>
+
+                <div className="border-b border-white/20 pb-6"></div>
+
+                <ProductDescription product={product} />
+              </div>
+            </div>
           </div>
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            {!!otherImages &&
+              otherImages?.length > 0 &&
+              otherImages.map((image) => (
+                <div key={image.url} className="relative aspect-square h-full w-full">
+                  <Image
+                    src={image.url}
+                    alt={image.altText}
+                    height={image.height}
+                    width={image.width}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              ))}
+          </div>
+          <Suspense>
+            <RelatedProducts id={product.id} />
+          </Suspense>
         </div>
-        <Suspense>
-          <RelatedProducts id={product.id} />
-        </Suspense>
       </div>
     </>
   );
@@ -106,31 +169,46 @@ export default async function ProductPage({ params }: { params: { handle: string
 async function RelatedProducts({ id }: { id: string }) {
   const relatedProducts = await getProductRecommendations({ productId: id });
 
-  console.debug({ relatedProducts });
-
   if (!relatedProducts.length) return null;
 
   return (
-    <div className="py-24">
-      <h2 className="font-multilingual mb-4 text-2xl">Related Products</h2>
+    <div className="border-t border-white/20 px-6 py-12 md:py-24">
+      <h2 className="font-multilingual pb-8 text-2xl">other products</h2>
       <ul className="flex w-full gap-4 overflow-x-auto pt-1">
         {relatedProducts.map((product) => (
           <li
             key={product.handle}
-            className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
+            className="h-full w-full flex-none min-[475px]:w-1/2 min-[475px]:pb-12 sm:w-1/3 md:w-1/4 lg:w-1/5"
           >
-            <Link className="relative block h-full w-full" href={`/product/${product.handle}`}>
-              <GridTileImage
-                alt={product.title}
-                label={{
-                  title: product.title,
-                  amount: product.priceRange.maxVariantPrice.amount,
-                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
-                }}
-                src={product.featuredImage?.url}
-                fill
-                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
-              />
+            <Link
+              className="relative block h-full w-full transition-opacity duration-150 hover:opacity-90"
+              href={`/product/${product.handle}`}
+            >
+              <div className="relative block aspect-square overflow-hidden">
+                <GridTileImage
+                  alt={product.title}
+                  label={{
+                    title: product.title,
+                    amount: product.priceRange.maxVariantPrice.amount,
+                    currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                  }}
+                  src={product.featuredImage?.url}
+                  fill
+                  sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
+                />
+              </div>
+              <div>
+                <Label
+                  title={product.title as string}
+                  amount={product.priceRange.maxVariantPrice.amount}
+                  currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+                  size={
+                    product?.variants?.[0]?.selectedOptions?.find(
+                      (option) => option.name === 'Size'
+                    )?.value
+                  }
+                />
+              </div>
             </Link>
           </li>
         ))}

app/[locale]/products/page.tsx

@@ -32,7 +32,7 @@ export default async function ProductPage({
 
   return (
     <div>
-      <Navbar cart={cart} locale={locale} />
+      <Navbar cart={cart} locale={locale} compact />
       <div className="py-24 md:py-48">
         <ThreeItemGrid lang={locale} />
       </div>