Work with displaying content

components/ui/product-card/product-card.tsx

@@ -1,79 +1,81 @@
 'use client'
 
+import Price from 'components/product/price'
+import Text from 'components/ui/text'
+import type { Product } from 'lib/storm/types/product'
 import { cn } from 'lib/utils'
-import { FC } from 'react'
-// import type { Product } from '@commerce/types/product'
 import dynamic from 'next/dynamic'
-// import usePrice from '@framework/product/use-price'
+import Link from 'next/link'
+import { FC } from 'react'
+
+const WishlistButton = dynamic(
+  () => import('components/ui/wishlist-button')
+)
 
-// const WishlistButton = dynamic(
-//   () => import('@components/wishlist/WishlistButton')
-// )
-const ProductTag = dynamic(() => import('components/ui/product-tag'))
 const SanityImage = dynamic(() => import('components/ui/sanity-image'))
 
 interface Props {
   className?: string
-  // product: Product
+  product: Product
   variant?: 'default'
 }
 
 const ProductCard: FC<Props> = ({
-  // product,
+  product,
   className,
   variant = 'default',
 }) => {
-  // const { price } = usePrice({
-  //   amount: product.price.value,
-  //   baseAmount: product.price.retailPrice,
-  //   currencyCode: product.price.currencyCode!,
-  // })
 
   const rootClassName = cn(
-    'w-full min-w-0 grow-0 shrink-0  group relative box-border overflow-hidden transition-transform ease-linear basis-[50%]',
+    'w-full group relative overflow-hidden transition-transform ease-linear',
     className
   )
 
   return (
-    <>Produyct</>
-    // <Link
-    //   href={`${product.slug}`}
-    //   className={rootClassName}
-    //   aria-label={product.name}
-    //   locale={product.locale}
-    // >
-    //   {variant === 'default' && (
-    //     <>
-    //       <div className={'flex flex-col flex-1 justify-center w-full h-full'}>
-    //         {/* {process.env.COMMERCE_WISHLIST_ENABLED && (
-    //           <WishlistButton
-    //             className={'top-4 right-4 z-10 absolute'}
-    //             productId={product.id}
-    //             variant={
-    //               product?.variants ? (product.variants[0] as any) : null
-    //             }
-    //           />
-    //         )} */}
-    //         {/* <div className="w-full h-full aspect-square overflow-hidden relative">
-    //           {product?.images && (
-    //             <SanityImage
-    //               image={product?.images[0]}
-    //               alt={product.name || 'Product Image'}
-    //               width={400}
-    //               height={400}
-    //               sizes="(max-width: 1024px) 50vw, 20vw"
-    //             />
-    //           )}
-    //         </div> */}
-    //         <ProductTag
-    //           className="mt-2 lg:mt-3"
-    //           name={product.title}
-    //           price={`${price}`}
-    //         />
-    //       </div>
-    //     </>
-    //   )}
-    // </Link>
+    <Link
+      href={`${product.slug}`}
+      className={rootClassName}
+      aria-label={product.name}
+      locale={product.locale}
+    >
+      {variant === 'default' && (
+        <div className={'flex flex-col justify-center w-full h-full'}>
+
+          <WishlistButton
+            className={'top-4 right-4 z-10 absolute'}
+            productId={product.id}
+            variant={
+              product?.variants ? (product.variants[0] as any) : null
+            }
+          />
+          <div className="w-full h-full aspect-square overflow-hidden relative">
+            {product?.images && (
+              <SanityImage
+                image={product?.images[0]}
+                alt={product.title || 'Product Image'}
+                width={400}
+                height={400}
+                sizes="(max-width: 1024px) 50vw, 20vw"
+              />
+            )}
+          </div>
+
+          <div
+            className={cn('text-high-contrast flex items-start flex-col', className)}
+          >
+            <Text
+              className="mt-2 lg:mt-3 font-bold"
+            >
+              {product.title}
+            </Text>
+            <Price 
+              amount={`${product.price.value}`} 
+              currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
+            />
+          </div>
+        </div>
+      )}
+    </Link>
   )
 }