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;