Ported more functionality

app/[locale]/[[...slug]]/category-page.tsx

@@ -0,0 +1,15 @@
+
+interface CategoryPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: CategoryPageProps) {
+  console.log(data);
+
+  return (
+    <>Category page</>
+  )
+}

app/[locale]/[[...slug]]/home-page.tsx

@@ -1,9 +1,13 @@
-import DynamicContentManager from 'components/ui/dynamic-content-manager'
+import DynamicContentManager from 'components/layout/dynamic-content-manager'
+
+interface HomePageProps {
+  data: object | any
+}
 
 // This is a Client Component. It receives data as props and
 // has access to state and effects just like Page components
 // in the `pages` directory.
-export default function HomePage({ data }: { data: object | any }) {
+export default function HomePage({ data }: HomePageProps) {
   return (
     <DynamicContentManager content={data?.content} />
   )

app/[locale]/[[...slug]]/page.tsx

@@ -4,7 +4,9 @@ import getQueryFromSlug from 'helpers/getQueryFromSlug';
 import { docQuery } from 'lib/sanity/queries';
 import { client } from 'lib/sanity/sanity.client';
 import { groq } from 'next-sanity';
+import CategoryPage from './category-page';
 import HomePage from './home-page';
+import ProductPage from './product-page';
 import SinglePage from './single-page';
 
 export async function generateStaticParams() {
@@ -57,11 +59,11 @@ export default async function Page({
   const data = filterDataToSingleItem(pageData, false)
   
   return (
-    <div>
-      <>
+    <>
       {docType === 'home' && <HomePage data={data} />}
+      {docType === 'product' && <ProductPage data={data} />}
+      {docType === 'category' && <CategoryPage data={data} />}
       {docType === 'page' && <SinglePage data={data} />}
     </>
-    </div>
   )
 }

app/[locale]/[[...slug]]/product-page.tsx

@@ -0,0 +1,16 @@
+import ProductView from "components/product/product-view";
+
+interface ProductPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: ProductPageProps) {
+  const { product } = data;
+
+  return (
+    <ProductView product={product} relatedProducts={[]} />
+  )
+}

app/[locale]/[[...slug]]/single-page.tsx

@@ -3,7 +3,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicContentManager = dynamic(
-  () => import('components/ui/dynamic-content-manager')
+  () => import('components/layout/dynamic-content-manager')
 )
 
 interface SinglePageProps {

app/[locale]/globals.css

@@ -39,15 +39,6 @@ body {
 }
 
 /* COMPONENTS */
-.glider {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.glider::-webkit-scrollbar {
-  display: none;
-}
-
 .glider-dots {
   @apply flex !space-x-[2px] !mt-8;
 }
@@ -56,10 +47,6 @@ body {
   @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
 }
 
-.glider-slide {
-  @apply max-w-full;
-}
-
 .glider-dot.active {
   @apply after:!bg-high-contrast;
 }

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'

helpers/getQueryFromSlug.ts

@@ -1,12 +1,16 @@
 import { groq } from 'next-sanity'
 import {
+  categoryQuery,
   homePageQuery,
   pageQuery,
+  productQuery
 } from '../lib/sanity/queries'
 
 const getQueryFromSlug = (slugArray: string[], locale: string) => {
   const docQuery = {
     homePage: groq`${homePageQuery}`,
+    product: groq`${productQuery}`,
+    category: groq`${categoryQuery}`,
     page: groq`${pageQuery}`,
   }
 
@@ -28,10 +32,10 @@ const getQueryFromSlug = (slugArray: string[], locale: string) => {
     locale: locale
   }
 
-  if (slugStart === 'articles' && slugArray.length === 2) {
-    docType = `article`
-  } else if (slugStart === 'work' && slugArray.length === 2) {
-    docType = `work`
+  if (slugStart === `produkt` || slugStart === `product`) {
+    docType = `product`
+  } else if (slugStart === `kategori` || slugStart === `category`) {
+    docType = `category`
   } else {
     docType = `page`
   }

languages.json

@@ -1,10 +0,0 @@
-{
-  "i18n": {
-    "languages": [
-      { "id": "sv", "title": "Swedish", "isDefault": true },
-      { "id": "nn", "title": "Norwegian" },
-      { "id": "en", "title": "English" }
-    ],
-    "base": "sv"
-  }
-}

next.config.js

@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const { i18n } = require('./languages.json')
-
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.BUNDLE_ANALYZE === 'true',
 })
@@ -12,7 +10,8 @@ module.exports = withBundleAnalyzer(
       ignoreDuringBuilds: true
     },
     experimental: {
-      appDir: true
+      appDir: true,
+      scrollRestoration: true,
     },
     images: {
       formats: ['image/avif', 'image/webp'],