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>

components/cart/add-to-cart.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
+import { useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useTransition } from 'react';
 
@@ -17,6 +17,8 @@ export function AddToCart({
 }) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const t = useTranslations('Index');
+
   const [isPending, startTransition] = useTransition();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
@@ -52,17 +54,18 @@ export function AddToCart({
         });
       }}
       className={clsx(
-        'relative flex w-full items-center justify-center rounded-md bg-white/20 p-4 font-sans tracking-wide text-white hover:opacity-90',
+        'relative flex w-full items-center justify-center bg-white p-4 font-serif text-xl tracking-wide text-black hover:opacity-90',
         {
           'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
           'cursor-not-allowed': isPending
         }
       )}
     >
-      <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
-      </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+      {!isPending ? (
+        <span>{availableForSale ? t('cart.add') : t('cart.out-of-stock')}</span>
+      ) : (
+        <LoadingDots className="mb-3 bg-white" />
+      )}
     </button>
   );
 }

components/grid/three-items.tsx

@@ -10,27 +10,26 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
   const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
   return (
     <div className={clsx('col-span-1 row-span-1 md:col-span-2 md:row-span-1')}>
-      <Link
-        className="relative block aspect-tall w-full overflow-hidden bg-black/30"
-        href={`/product/${item.handle}`}
-      >
-        <GridTileImage
-          src={item.featuredImage.url}
-          fill
-          sizes={'(min-width: 768px) 33vw, 100vw'}
-          priority={priority}
-          alt={item.title}
-        />
+      <Link className="w-full bg-black/30" href={`/product/${item.handle}`}>
+        <div className="relative block aspect-tall overflow-hidden ">
+          <GridTileImage
+            src={item.featuredImage.url}
+            fill
+            sizes={'(min-width: 768px) 33vw, 100vw'}
+            priority={priority}
+            alt={item.title}
+          />
+        </div>
+        <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
+          <Label
+            title={item.title as string}
+            amount={item.priceRange.maxVariantPrice.amount}
+            currencyCode={item.priceRange.maxVariantPrice.currencyCode}
+            size={size?.value}
+          />
+          <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
+        </div>
       </Link>
-      <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
-        <Label
-          title={item.title as string}
-          amount={item.priceRange.maxVariantPrice.amount}
-          currencyCode={item.priceRange.maxVariantPrice.currencyCode}
-          size={size?.value}
-        />
-        <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
-      </div>
     </div>
   );
 }

components/layout/footer.tsx

@@ -20,7 +20,7 @@ export default async function Footer({ cart }: { cart?: Cart }) {
       <div
         className={clsx(
           'mx-auto flex w-full max-w-screen-xl justify-between',
-          'flex-col gap-6 py-12',
+          'flex-col gap-6 py-6 md:py-12',
           'border-t border-subtle',
           'text-sm md:flex-row md:gap-12'
         )}

components/layout/navbar/index.tsx

@@ -12,8 +12,16 @@ import { useInView } from 'react-intersection-observer';
 import { MenuModal } from '../menu/modal';
 import { LanguageControl, SupportedLocale } from './language-control';
 
-export default function Navbar({ cart, locale }: { cart?: Cart; locale?: SupportedLocale }) {
-  const { ref, inView, entry } = useInView({
+export default function Navbar({
+  cart,
+  locale,
+  compact
+}: {
+  cart?: Cart;
+  locale?: SupportedLocale;
+  compact?: boolean;
+}) {
+  const { ref, inView } = useInView({
     threshold: 0,
     initialInView: true
   });
@@ -54,7 +62,7 @@ export default function Navbar({ cart, locale }: { cart?: Cart; locale?: Support
           <Link href="/" className="transition-opacity duration-150 hover:opacity-90">
             <LogoNamemark
               className={clsx(
-                inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
+                inView && !compact ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
                 'fill-current pt-4 transition-all duration-150 md:pt-12'
               )}
             />

components/product/gallery.tsx

@@ -28,7 +28,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
 
   return (
     <>
-      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
+      <div className="relative aspect-square h-full w-full overflow-hidden">
         {images[imageIndex] && (
           <Image
             className="h-full w-full object-cover"

components/product/product-description.tsx

@@ -1,31 +1,15 @@
-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 border-white/20 pb-6">
-        <h1 className="font-multilingual mb-2 text-5xl">{product.title}</h1>
-        <div className="font-multilingual mr-auto w-auto text-lg 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-lg leading-tight dark:text-white/[60%]"
           html={product.descriptionHtml}
         />
       ) : null}
-
-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
     </>
   );
 }

components/product/variant-selector.tsx

@@ -89,12 +89,12 @@ export function VariantSelector({
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
-                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-white px-2 py-1 text-sm text-black',
                 {
-                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
+                  'cursor-default ring-2 hover:ring-dark/50': isActive,
+                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-dark/30 ':
                     !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
+                  'relative z-10 cursor-not-allowed overflow-hidden bg-white text-black ring-1 ring-white before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform':
                     !isAvailableForSale
                 }
               )}

messages/en.json

@@ -48,6 +48,10 @@
       "newsletter": {
         "promo": "Get 10% off on your first order. Get discount."
       }
+    },
+    "cart": {
+      "add": "Add to cart",
+      "out-of-stock": "Out of stock"
     }
   }
 }

messages/ja.json

@@ -46,8 +46,12 @@
     },
     "footer": {
       "newsletter": {
-        "promo": "Get 10% off on your first order. Get discount."
+        "promo": "初回注文で10％割引。割引を受ける。"
       }
+    },
+    "cart": {
+      "add": "カートに入れる",
+      "out-of-stock": "品切れ中"
     }
   }
 }