Merge branch 'main' into readme-adding-shopware

vercel · Aug 8, 2023 · ea03bce · ea03bce
2 parents 6c46867 + 74b5a25
commit ea03bce
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
@@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Gallery
               images={product.images.map((image: Image) => ({

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
@@ -39,7 +39,7 @@ export default async function Footer() {
         </Suspense>
         <div className="md:ml-auto">
           <a
-            className="flex h-8 flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
+            className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
             aria-label="Deploy on Vercel"
             href="https://vercel.com/templates/next.js/nextjs-commerce"
           >

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
@@ -74,7 +74,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             imageSearchParams.set('image', index.toString());
 
             return (
-              <li key={image.src} className="h-auto w-20">
+              <li key={image.src} className="h-20 w-20">
                 <Link
                   aria-label="Enlarge product image"
                   href={createUrl(pathname, imageSearchParams)}

diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
@@ -3,8 +3,7 @@
 import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 type Combination = {
   id: string;
@@ -19,6 +18,7 @@ export function VariantSelector({
   options: ProductOption[];
   variants: ProductVariant[];
 }) {
+  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const hasNoOptionsOrJustOneOption =
@@ -76,17 +76,14 @@ export function VariantSelector({
           // The option is active if it's in the url params.
           const isActive = searchParams.get(optionNameLowerCase) === value;
 
-          // You can't disable a link, so we need to render something that isn't clickable.
-          const DynamicTag = isAvailableForSale ? Link : 'p';
-          const dynamicProps = {
-            ...(isAvailableForSale && { scroll: false })
-          };
-
           return (
-            <DynamicTag
+            <button
               key={value}
               aria-disabled={!isAvailableForSale}
-              href={optionUrl}
+              disabled={!isAvailableForSale}
+              onClick={() => {
+                router.replace(optionUrl, { scroll: false });
+              }}
               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',
@@ -98,10 +95,9 @@ export function VariantSelector({
                     !isAvailableForSale
                 }
               )}
-              {...dynamicProps}
             >
               {value}
-            </DynamicTag>
+            </button>
           );
         })}
       </dd>