Work with displaying content

components/ui/blurb-section/blurb-section.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,

components/ui/card/index.tsx

@@ -1 +1,2 @@
-export { default } from './Card'
+export { default } from './card';
+

components/ui/carousel/carousel.tsx

@@ -12,7 +12,7 @@ export interface CarouselItemProps {
 export const CarouselItem: React.FC<CarouselItemProps> = ({
   children,
 }: CarouselItemProps) => {
-  return <div className="">{children}</div>
+  return <>{children}</>
 }
 
 export interface CarouselProps {
@@ -39,7 +39,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   return (
     <div className="flex flex-col">
       <Glider
-        className={`flex w-full relative ${gliderClasses}`}
+        className={`flex !w-full relative ${gliderClasses}`}
         draggable
         slidesToShow={slidesToShow}
         scrollLock
@@ -51,7 +51,7 @@ export const Carousel: React.FC<CarouselProps> = ({
         responsive={[responsive]}
         skipTrack
       >
-        <div className={`flex w-full ${gliderItemWrapperClasses} `}>
+        <div className={`flex ${gliderItemWrapperClasses} `}>
           {React.Children.map(children, (child) => {
             return React.cloneElement(child)
           })}

components/ui/filtered-product-list/filtered-product-list.tsx

@@ -25,8 +25,7 @@ const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
       )}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {products.slice(0, itemsToShow).map((product: any, index: number) => (
-          <span>Product</span>
-          // <ProductCard key={`${product.id}-${index}`} product={product} />
+          <ProductCard key={`${product.id}-${index}`} product={product} />
         ))}
       </div>
     </div>

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>
   )
 }
 

components/ui/slider/slider.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,
@@ -32,7 +30,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
   }, [])
 
   return (
-    <div>
+    <div className="flex flex-col">
       {title ? (
         <Text
           className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
@@ -53,20 +51,18 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
         <Carousel
           gliderClasses={'px-4 lg:px-8 2xl:px-16'}
           gliderItemWrapperClasses={'space-x-2 lg:space-x-4'}
-          hasDots={true}
           slidesToShow={2.2}
           responsive={{
             breakpoint: 1024,
             settings: {
-              slidesToShow: 4.5,
+              slidesToShow: 4.5
             },
           }}
         >
           {items.map((item: any, index: number) => (
             <CarouselItem key={`${sliderType}-${index}`}>
-              {item.title}
-              {/* {sliderType === 'products' && <ProductCard product={item} />}
-              {sliderType === 'categories' && <CategoryCard category={item} />} */}
+              {sliderType === 'products' && <ProductCard product={item} />}
+              {sliderType === 'categories' && <CategoryCard category={item} />}
             </CarouselItem>
           ))}
         </Carousel>

components/ui/wishlist-button/index.ts

@@ -0,0 +1 @@
+export { default } from './wishlist-button';

components/ui/wishlist-button/wishlist-button.tsx

@@ -0,0 +1,79 @@
+import type { Product, ProductVariant } from 'lib/storm/types/product'
+import { cn } from 'lib/utils'
+import { Heart } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import React, { FC, useState } from 'react'
+
+type Props = {
+  productId: Product['id']
+  variant: ProductVariant
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  productId,
+  variant,
+  className,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(false)
+  const t = useTranslations('ui.button')
+
+  // @ts-ignore Wishlist is not always enabled
+  // const itemInWishlist = data?.items?.find(
+  //   // @ts-ignore Wishlist is not always enabled
+  //   (item) => item.product_id === productId && item.variant_id === variant.id
+  // )
+
+  const handleWishlistChange = async (e: any) => {
+    e.preventDefault()
+
+    if (loading) return
+
+    // A login is required before adding an item to the wishlist
+    // if (!customer) {
+    //   setModalView('LOGIN_VIEW')
+    //   return openModal()
+    // }
+
+    // setLoading(true)
+
+    // try {
+    //   if (itemInWishlist) {
+    //     await removeItem({ id: itemInWishlist.id! })
+    //   } else {
+    //     await addItem({
+    //       productId,
+    //       variantId: variant?.id!,
+    //     })
+    //   }
+
+    //   setLoading(false)
+    // } catch (err) {
+    //   setLoading(false)
+    // }
+  }
+
+  return (
+    <button
+      aria-label={t('wishList')}
+      className={cn(
+        'w-10 h-10 text-high-contrast bg-app border border-high-contrast flex items-center justify-center font-semibold cursor-pointer text-sm duration-200 ease-in-out transition-[color,background-color,opacity] ',
+        className
+      )}
+      // onClick={handleWishlistChange}
+      {...props}
+    >
+      <Heart
+        className={cn(
+          'duration-200 ease-in-out w-5 h-5 transition-[transform,fill] text-current',
+          {
+            ['fill-low-contrast']: loading,
+            // ['fill-high-contrast']: itemInWishlist,
+          }
+        )}
+      />
+    </button>
+  )
+}
+
+export default WishlistButton