Search fixes

components/product/gallery.tsx

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

components/product/grid.tsx

@@ -6,7 +6,7 @@ export function Grid({
   images: { src: string; alt: string; width: number | undefined; height: number | undefined }[];
 }) {
   return (
-    <div className="grid grid-cols-2 gap-4">
+    <div className="grid w-full grid-cols-2 gap-4">
       {images.map(
         (
           image: {
@@ -19,7 +19,7 @@ export function Grid({
         ) => {
           return (
             <Image
-              className="aspect-square h-full w-full object-contain first:col-span-2"
+              className="aspect-square h-full w-full bg-neutral-300 object-cover first:col-span-2"
               src={image.src}
               height={image.height}
               width={image.width}

components/product/price.tsx

@@ -1,22 +0,0 @@
-const Price = ({
-  className,
-  amount,
-  currencyCode,
-  ...props
-}: {
-  amount: string;
-  currencyCode: string | 'SEK' | 'GPB';
-  className?: string;
-} & React.ComponentProps<'p'>) => (
-  <p className={className} suppressHydrationWarning={true} {...props}>
-    
-    {`${new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: currencyCode,
-      currencyDisplay: 'narrowSymbol'
-    }).format(parseFloat(amount))} ${currencyCode}`}
-    
-  </p>
-);
-
-export default Price;

components/product/product-view.tsx

@@ -1,14 +1,20 @@
 'use client';
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@/components/ui/accordion';
 import { Product } from '@/lib/storm/product';
 import { Image } from '@/lib/storm/types';
 import Text from 'components/ui/text/text';
 import { cn } from 'lib/utils';
 import { useTranslations } from 'next-intl';
 import { Suspense } from 'react';
+import Price from '../price';
 import { Gallery } from './gallery';
 import { Grid } from './grid';
-import Price from './price';
 
 interface ProductViewProps {
   product: Product;
@@ -43,21 +49,10 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
                 width: image.width
               }))}
             />
-
-            {/* {images.map((image: Image, index: number) => (
-              <div key={index} className="first:col-span-2">
-                <SanityImage
-                  image={image}
-                  alt={image.alt}
-                  priority={index === 0 ? true : false}
-                  sizes="(max-width: 1024px) 100vw, 70vw"
-                />
-              </div>
-            ))} */}
           </div>
         </div>
 
-        <div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
+        <div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
           <Text variant={'productHeading'}>{name}</Text>
 
           <Price
@@ -66,9 +61,23 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
             currencyCode={price.currencyCode ? price.currencyCode : 'SEK'}
           />
 
-          <Text className="mt-2" variant="paragraph">
-            {description}
-          </Text>
+          {description && (
+            <Accordion
+              className="mt-8"
+              type="single"
+              collapsible
+              defaultValue="product-description"
+            >
+              <AccordionItem value="product-description">
+                <AccordionTrigger>{t('description')}</AccordionTrigger>
+                <AccordionContent>
+                  <Text className="mt-2" variant="paragraph">
+                    {description}
+                  </Text>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          )}
         </div>
       </div>