From b954a14d25f19749060a5012c563cd3afc1514c1 Mon Sep 17 00:00:00 2001
From: Martin Westerlund <martin@kodamera.se>
Date: Mon, 8 May 2023 11:49:40 +0200
Subject: [PATCH] Added USP section styling

---
 .../dynamic-content-manager.tsx               | 73 ++++++++++---------
 components/ui/usp-section/index.ts            |  1 +
 components/ui/usp-section/usp-section.tsx     | 44 +++++++++++
 lib/sanity/queries.tsx                        | 14 ++++
 4 files changed, 96 insertions(+), 36 deletions(-)
 create mode 100644 components/ui/usp-section/index.ts
 create mode 100644 components/ui/usp-section/usp-section.tsx

diff --git a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
index 0dfbe6883..78148f90c 100644
--- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
+++ b/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;
diff --git a/components/ui/usp-section/index.ts b/components/ui/usp-section/index.ts
new file mode 100644
index 000000000..af87fbfc5
--- /dev/null
+++ b/components/ui/usp-section/index.ts
@@ -0,0 +1 @@
+export { default } from './usp-section';
diff --git a/components/ui/usp-section/usp-section.tsx b/components/ui/usp-section/usp-section.tsx
new file mode 100644
index 000000000..3b05f41c4
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index 9c2c03d1c..0effaac3e 100644
--- a/lib/sanity/queries.tsx
+++ b/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