Product view updates

components/product/gallery.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import clsx from 'clsx';
-import { GridTileImage } from 'components/grid/tile';
-import ArrowLeftIcon from 'components/icons/arrow-left';
-
-export function Gallery({
-  title,
-  amount,
-  currencyCode,
-  images
-}: {
-  title: string;
-  amount: string;
-  currencyCode: string;
-  images: { src: string; altText: string }[];
-}) {
-  const [currentImage, setCurrentImage] = useState(0);
-
-  function handleNavigate(direction: 'next' | 'previous') {
-    if (direction === 'next') {
-      setCurrentImage(currentImage + 1 < images.length ? currentImage + 1 : 0);
-    } else {
-      setCurrentImage(currentImage === 0 ? images.length - 1 : currentImage - 1);
-    }
-  }
-
-  const buttonClassName =
-    'px-9 cursor-pointer ease-in-and-out duration-200 transition-bg bg-[#7928ca] hover:bg-violetDark';
-
-  return (
-    <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}
-            height={600}
-            isInteractive={false}
-            priority={true}
-            background="purple"
-            labels={{
-              title,
-              amount,
-              currencyCode
-            }}
-          />
-        )}
-
-        {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
-              aria-label="Previous product image"
-              className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
-              onClick={() => handleNavigate('previous')}
-            >
-              <ArrowLeftIcon className="h-6" />
-            </button>
-            <button
-              aria-label="Next product image"
-              className={clsx(buttonClassName)}
-              onClick={() => handleNavigate('next')}
-            >
-              <ArrowLeftIcon className="h-6 rotate-180" />
-            </button>
-          </div>
-        ) : null}
-      </div>
-
-      {images.length > 1 ? (
-        <div className="flex">
-          {images.map((image, index) => {
-            const isActive = index === currentImage;
-            return (
-              <button
-                aria-label="Enlarge product image"
-                key={image.src}
-                className="h-full w-1/4"
-                onClick={() => setCurrentImage(index)}
-              >
-                <GridTileImage
-                  alt={image?.altText}
-                  src={image.src}
-                  width={600}
-                  height={600}
-                  background="purple-dark"
-                  active={isActive}
-                />
-              </button>
-            );
-          })}
-        </div>
-      ) : null}
-    </div>
-  );
-}

components/product/product-view.tsx

@@ -1,11 +1,13 @@
 'use client'
 
 import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
+import Price from 'components/product/price'
 import SanityImage from 'components/ui/sanity-image'
 import { Product } from "lib/storm/types/product"
 import { cn } from 'lib/utils'
 import { useTranslations } from 'next-intl'
 import dynamic from "next/dynamic"
+import { AddToCart } from './add-to-cart'
 const ProductCard = dynamic(() => import('components/ui/product-card'))
 const Text = dynamic(() => import('components/ui/text'))
 interface ProductViewProps {
@@ -15,14 +17,13 @@ interface ProductViewProps {
 
 export default function ProductView({product, relatedProducts }: ProductViewProps) {
   const images = product.images
-  const productImage: object | any = product.images[0]
   const t = useTranslations('product')
 
   return (
     <div className="flex flex-col w-full mb-8 lg:my-16">
       <div className={cn('relative grid items-start grid-cols-1 lg:px-8 lg:grid-cols-12 2xl:px-16')}>
         
-        <div className="relative col-span-1 lg:col-span-8">
+        <div className="relative col-span-1 lg:col-span-7">
           <div className={`pdp aspect-square lg:hidden`}>
             {images && (
               <Carousel
@@ -68,10 +69,18 @@ export default function ProductView({product, relatedProducts }: ProductViewProp
           </div>
         </div>
 
-        <div className="flex flex-col col-span-1 mx-auto px-4 py-6 w-full h-auto lg:col-span-4 lg:py-0 lg:px-8 lg:pr-0 2xl:px-16 2xl:pr-0 lg:sticky lg:top-8 2xl:top-16">
+        <div className="flex flex-col col-span-1 mx-auto px-4 py-6 w-full h-auto lg:col-span-5 lg:py-0 lg:px-8 lg:pr-0 2xl:px-16 2xl:pr-0 lg:sticky lg:top-8 2xl:top-16">
           <Text variant={'productHeading'}>
             {product.name}
           </Text>
+
+          <Price
+            className='text-sm font-medium leading-tight lg:text-base' 
+            amount={`${product.price.value}`} 
+            currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
+          />
+
+          <AddToCart availableForSale={true} variants={[]} />
         </div>
 
       </div>
@@ -95,7 +104,7 @@ export default function ProductView({product, relatedProducts }: ProductViewProp
               },
             }}
           >
-            {relatedProducts.map((p, index) => (
+            {relatedProducts.map((p) => (
               <CarouselItem key={`product-${p.path}`}>
                 <ProductCard product={p} />
               </CarouselItem>