Ported more functionality

components/cart/edit-item-quantity-button.tsx

@@ -4,8 +4,8 @@ import { startTransition, useState } from 'react';
 import clsx from 'clsx';
 import MinusIcon from 'components/icons/minus';
 import PlusIcon from 'components/icons/plus';
+import LoadingDots from 'components/ui/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import LoadingDots from '../loading-dots';
 
 export default function EditItemQuantityButton({
   item,

components/cart/modal.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 
 import CloseIcon from 'components/icons/close';
 import ShoppingBagIcon from 'components/icons/shopping-bag';
-import Price from 'components/price';
+import Price from 'components/product/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -3,11 +3,11 @@
 import { Info } from 'lucide-react'
 import dynamic from 'next/dynamic'
 
-import Hero from 'components/ui/hero'
-const Slider = dynamic(() => import('components/ui/slider'))
-const BlurbSection = dynamic(() => import('components/ui/blurb-section'))
+import Hero from 'components/modules/hero'
+const Slider = dynamic(() => import('components/modules/slider'))
+const BlurbSection = dynamic(() => import('components/modules/blurb-section'))
 const FilteredProductList = dynamic(
-  () => import('components/ui/filtered-product-list')
+  () => import('components/modules/filtered-product-list')
 )
 
 interface getContentComponentProps {

components/modules/blurb-section/blurb-section.tsx

@@ -1,15 +1,13 @@
-'use client'
-
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,
-} from 'components/ui/carousel/carousel'
+} from 'components/modules/carousel/carousel'
 import dynamic from 'next/dynamic'
 const Carousel = dynamic<Props>(() =>
-  import('components/ui/carousel/carousel').then((mod) => mod.Carousel)
+  import('components/modules/carousel/carousel').then((mod) => mod.Carousel)
 )
 const CarouselItem = dynamic<ItemProps>(() =>
-  import('components/ui/carousel/carousel').then((mod) => mod.CarouselItem)
+  import('components/modules/carousel/carousel').then((mod) => mod.CarouselItem)
 )
 const Card = dynamic(() => import('components/ui/card'))
 
@@ -80,12 +78,12 @@ const BlurbSection = ({
       <div
         className={`${
           mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
-        }`}
+        }`} 
       >
         {blurbs && (
           <Carousel
             gliderClasses={'px-4 lg:px-8 2xl:px-16'}
-            gliderItemWrapperClasses={'space-x-2 lg:space-x-4'}
+            gliderItemWrapperClasses={''}
             hasDots={true}
             slidesToShow={2.2}
             responsive={{

components/modules/carousel/carousel.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import 'glider-js/glider.min.css'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 import React from 'react'
@@ -7,12 +5,14 @@ import Glider from 'react-glider'
 
 export interface CarouselItemProps {
   children: React.ReactNode
+  className?: string
 }
 
 export const CarouselItem: React.FC<CarouselItemProps> = ({
   children,
+  className = 'ml-2 first:ml-0 lg:ml-4'
 }: CarouselItemProps) => {
-  return <>{children}</>
+  return <div className={className}>{children}</div>
 }
 
 export interface CarouselProps {
@@ -20,7 +20,6 @@ export interface CarouselProps {
   gliderClasses?: string
   hasArrows?: boolean
   hasDots?: boolean
-  gliderItemWrapperClasses?: string
   slidesToShow?: number
   slidesToScroll?: number
   responsive?: any
@@ -31,15 +30,16 @@ export const Carousel: React.FC<CarouselProps> = ({
   gliderClasses,
   hasArrows = true,
   hasDots = true,
-  gliderItemWrapperClasses,
   slidesToShow = 1,
   slidesToScroll = 1,
   responsive,
 }) => {
+
+
   return (
-    <div className="flex flex-col">
+    <>
       <Glider
-        className={`flex !w-full relative ${gliderClasses}`}
+        className={`block relative ${gliderClasses}`}
         draggable
         slidesToShow={slidesToShow}
         scrollLock
@@ -49,14 +49,12 @@ export const Carousel: React.FC<CarouselProps> = ({
         iconLeft={<ArrowLeft className="stroke-current" />}
         iconRight={<ArrowRight className="stroke-current" />}
         responsive={[responsive]}
-        skipTrack
       >
-        <div className={`flex ${gliderItemWrapperClasses} `}>
           {React.Children.map(children, (child) => {
             return React.cloneElement(child)
           })}
-        </div>
+
       </Glider>
-    </div>
+    </>
   )
 }

components/modules/slider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './slider';
+

components/modules/slider/slider.tsx

@@ -1,15 +1,15 @@
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,
-} from 'components/ui/carousel/carousel'
+} from 'components/modules/carousel/carousel'
 import Text from 'components/ui/text'
 import dynamic from 'next/dynamic'
 import { useEffect, useState } from 'react'
 const Carousel = dynamic<Props>(() =>
-  import('components/ui/carousel/carousel').then((mod) => mod.Carousel)
+  import('components/modules/carousel/carousel').then((mod) => mod.Carousel)
 )
 const CarouselItem = dynamic<ItemProps>(() =>
-  import('components/ui/carousel/carousel').then((mod) => mod.CarouselItem)
+  import('components/modules/carousel/carousel').then((mod) => mod.CarouselItem)
 )
 const ProductCard = dynamic(() => import('components/ui/product-card'))
 const CategoryCard = dynamic(() => import('components/ui/category-card'))
@@ -49,8 +49,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
 
       {items && (
         <Carousel
-          gliderClasses={'px-4 lg:px-8 2xl:px-16'}
-          gliderItemWrapperClasses={'space-x-2 lg:space-x-4'}
+          gliderClasses={'flex px-4 lg:px-8 2xl:px-16'}
           slidesToShow={2.2}
           responsive={{
             breakpoint: 1024,

components/product/product-view.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import {
+  CarouselItemProps as ItemProps,
+  CarouselProps as Props,
+} from 'components/modules/carousel/carousel'
+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"
+const ProductCard = dynamic(() => import('components/ui/product-card'))
+const Carousel = dynamic<Props>(() =>
+  import('components/modules/carousel/carousel').then((mod) => mod.Carousel)
+)
+const CarouselItem = dynamic<ItemProps>(() =>
+  import('components/modules/carousel/carousel').then((mod) => mod.CarouselItem)
+)
+const Text = dynamic(() => import('components/ui/text'))
+interface ProductViewProps {
+  product: Product
+  relatedProducts: Product[]
+}
+
+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={`pdp aspect-square lg:hidden`}>
+            {images && (
+              <Carousel
+                hasArrows={true}
+                hasDots={false}
+                gliderClasses={'lg:px-8 2xl:px-16'}
+                slidesToScroll={1}
+                slidesToShow={1.025}
+                responsive={{
+                  breakpoint: 1024,
+                  settings: {
+                    slidesToShow: 1,
+                  },
+                }}
+              >
+                {images.map((image: any, index: number) => (
+                  <CarouselItem className="ml-1 first:ml-0" key={`${index}`}>
+                    <SanityImage
+                      image={image}
+                      alt={image.alt}
+                      priority={true}
+                      quality={85}
+                      sizes="(max-width: 1024px) 100vw, 70vw"
+                    />
+                  </CarouselItem>
+                ))}
+              </Carousel>
+            )}
+          </div>
+
+          <div className="hidden lg:grid grid-cols-2 gap-4">
+            {images.map((image: any, index: number) => (
+              <div key={index} className="first:col-span-2">
+                <SanityImage
+                  image={image}
+                  alt={image.alt}
+                  priority={true}
+                  quality={85}
+                  sizes="(max-width: 1024px) 100vw, 70vw"
+                />
+              </div>
+            ))}
+          </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">
+          {product.name}
+        </div>
+
+      </div>
+    
+      {relatedProducts.length > 0 && (
+        <section className="flex flex-col my-16 lg:my-24">
+          <Text className="px-4 lg:px-8 2xl:px-16" variant="sectionHeading">
+            {t('related')}
+          </Text>
+
+          <Carousel
+            gliderClasses={'px-4 lg:px-8 2xl:px-16'}
+            hasArrows={true}
+            hasDots={true}
+            slidesToShow={2.2}
+            slidesToScroll={1}
+            responsive={{
+              breakpoint: 1024,
+              settings: {
+                slidesToShow: 4.5,
+              },
+            }}
+          >
+            {relatedProducts.map((p, index) => (
+              <CarouselItem key={`product-${p.path}`}>
+                <ProductCard product={p} />
+              </CarouselItem>
+            ))}
+          </Carousel>
+        </section>
+      )}
+    </div>
+  )
+}

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

@@ -27,7 +27,7 @@ const ProductCard: FC<Props> = ({
 }) => {
 
   const rootClassName = cn(
-    'w-full group relative overflow-hidden transition-transform ease-linear',
+    'w-full group relative overflow-hidden',
     className
   )
 
@@ -39,7 +39,7 @@ const ProductCard: FC<Props> = ({
       locale={product.locale}
     >
       {variant === 'default' && (
-        <div className={'flex flex-col justify-center w-full h-full'}>
+        <div className={'flex flex-col relative justify-center w-full h-full'}>
 
           <WishlistButton
             className={'top-4 right-4 z-10 absolute'}
@@ -48,13 +48,11 @@ const ProductCard: FC<Props> = ({
               product?.variants ? (product.variants[0] as any) : null
             }
           />
-          <div className="w-full h-full aspect-square overflow-hidden relative">
+          <div className="w-full h-full 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"
               />
             )}

components/ui/product-tag/index.ts

@@ -1,2 +0,0 @@
-export { default } from './product-tag';
-

components/ui/product-tag/product-tag.tsx

@@ -1,48 +0,0 @@
-'use client'
-
-import { cn } from 'lib/utils'
-import dynamic from 'next/dynamic'
-const Text = dynamic(() => import('components/ui/text'))
-
-interface ProductTagProps {
-  className?: string
-  name: string
-  price: string
-  variant?: 'productView' | 'cardView'
-}
-
-const ProductTag: React.FC<ProductTagProps> = ({
-  name,
-  price,
-  className = '',
-  variant = 'cardView',
-}) => {
-  return (
-    <div
-      className={cn('text-high-contrast flex items-start flex-col', className)}
-    >
-      <Text
-        className={
-          variant === 'cardView'
-            ? ''
-            : '!text-[32px] !leading-[32px] !font-normal'
-        }
-        variant={variant === 'cardView' ? 'listChildHeading' : 'pageHeading'}
-      >
-        {name}
-      </Text>
-      <Text
-        className={
-          variant === 'cardView'
-            ? '!text-sm !font-semibold !leading-tight lg:!text-base'
-            : '!font-bold !text-[32px] !leading-[32px]'
-        }
-        variant="paragraph"
-      >
-        {price}
-      </Text>
-    </div>
-  )
-}
-
-export default ProductTag

components/ui/slider/index.ts

@@ -1 +0,0 @@
-export { default } from './Slider'