Merge pull request #1 from kodamera/feature/kmc-74-usp-section

Added USP section styling

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

@@ -1,46 +1,49 @@
-'use client'
+'use client';
 
 import { Info } from 'lucide-react';
 import dynamic from 'next/dynamic';
 
 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/modules/filtered-product-list')
-)
+const USPSection = dynamic(() => import('components/ui/usp-section'));
+const Slider = dynamic(() => import('components/modules/slider'));
+const BlurbSection = dynamic(() => import('components/modules/blurb-section'));
+const FilteredProductList = dynamic(() => import('components/modules/filtered-product-list'));
 
 interface getContentComponentProps {
-  _type: string
-  _key: number
-  disabled: boolean
+  _type: string;
+  _key: number;
+  disabled: boolean;
 }
 
-const getContentComponent = ({
-  _type,
-  _key,
-  disabled,
-  ...rest
-}: getContentComponentProps) => {
-  let Component: any
 
+
+const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
+  let Component: any;
+  console.log('type', _type)
   switch (_type) {
     case 'hero':
-      Component = Hero
-      break
+      Component = Hero;
+      break;
     case 'slider':
-      Component = Slider
-      break
+      Component = Slider;
+      break;
     case 'filteredProductList':
-      Component = FilteredProductList
-      break
+      Component = FilteredProductList;
+      break;
     case 'blurbSection':
       if (disabled !== true) {
-        Component = BlurbSection
+        Component = BlurbSection;
       } else {
-        return
+        return;
       }
-      break
+      break;
+    case 'uspSection':
+      if (disabled !== true) {
+        Component = USPSection;
+      } else {
+        return;
+      }
+      break;
     default:
       return (
         <div
@@ -49,31 +52,29 @@ const getContentComponent = ({
           }`}
           key={`index-${_key}`}
         >
-          <span className="inline-flex items-center bg-red font-bold p-2 text-sm">
+          <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
             <Info className="mr-1" />
             {`No matching component (Type: ${_type})`}
           </span>
         </div>
-      )
+      );
   }
 
   return Component ? (
     <Component key={`index-${_key}`} {...rest} />
   ) : (
     <div key={`index-${_key}`}>Something else</div>
-  )
-}
+  );
+};
 
 interface dynamicContentManagerProps {
-  content: [] | any
+  content: [] | any;
 }
 
 const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
   return (
-    <div className="dynamic-content overflow-x-hidden">
-      {content?.map(getContentComponent)}
-    </div>
-  )
-}
+    <div className="dynamic-content overflow-x-hidden">{content?.map(getContentComponent)}</div>
+  );
+};
 
-export default DynamicContentManager
+export default DynamicContentManager;

components/ui/usp-section/index.ts

@@ -0,0 +1 @@
+export { default } from './usp-section';

components/ui/usp-section/usp-section.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import SanityImage from '../sanity-image'
+
+interface USPSectionProps {
+  usps: any
+  title: string
+  mobileLayout: string
+  desktopLayout: string
+  imageFormat: 'square' | 'portrait' | 'landscape'
+}
+
+const USPSection = ({ usps }: USPSectionProps) => {
+  const desktopGridLayout = `lg:grid-cols-${usps.length}`
+  return (
+    <div
+      className={`w-full px-4 lg:px-16 py-16 lg:py-24 grid grid-cols-2 gap-x-4 gap-y-6 lg:gap-x-12 ${desktopGridLayout}`}
+    >
+      {usps.map((usp: any, index: number) => (
+        <div
+          key={index}
+          className={`w-full flex flex-col items-center text-center`}
+        >
+          <div className="w-20 h-20 lg:w-24 lg:h-24 mb-4 lg:mb-8">
+            <SanityImage
+              className="object-cover"
+              image={usp?.image}
+              alt={usp.name || 'USP image'}
+              width={96}
+              height={96}
+              sizes="96px"
+            />
+          </div>
+          <h3 className="mb-2 lg:mb-4 text-xl lg:text-2xl">{usp.title}</h3>
+          <p className="text-sm lg:text-base !text-low-contrast max-w-xs">
+            {usp.text}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default USPSection

lib/sanity/queries.tsx

@@ -127,6 +127,20 @@ export const modules = `
       },
     },
   },
+  _type == 'uspSection' => {
+    disabled,
+    _type,
+    _key,
+    title,
+    usps[]->{
+      title,
+      text,
+      "locale": language,
+      image {
+        ${imageFields}
+      },
+    },
+  }
 `
 
 // Homepage query