Hero updates

2025-07-23 04:36:49 +00:00 · 2023-08-13 22:38:58 +02:00
parent accfb6c38c
commit 671e3744db
4 changed files with 196 additions and 101 deletions
--- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
+++ b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
@@ -1,94 +1,88 @@
 'use client';

-import dynamic from 'next/dynamic';
-
+import BlurbSection from '@/components/modules/blurb-section/blurb-section';
+import FilteredProductList from '@/components/modules/filtered-product-list/filtered-product-list';
 import Hero from '@/components/modules/hero';
-const BlurbSection = dynamic(() => import('@/components/modules/blurb-section/blurb-section'));
-const FilteredProductList = dynamic(
-  () => import('@/components/modules/filtered-product-list/filtered-product-list')
-);
-const ReusableSection = dynamic(
-  () => import('@/components/modules/reusable-section/reusable-section')
-);
-const Slider = dynamic(() => import('@/components/modules/slider/slider'));
-const USPSection = dynamic(() => import('@/components/modules/usp-section/usp-section'));
-
+import ReusableSection from '@/components/modules/reusable-section/reusable-section';
+import Slider from '@/components/modules/slider/slider';
+import USPSection from '@/components/modules/usp-section/usp-section';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { Suspense } from 'react';

-interface getContentComponentProps {
-  _type: string;
-  _key: number;
-  disabled: boolean;
-}
+// interface getContentComponentProps {
+//   _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;

-  switch (_type) {
-    case 'hero':
-      if (disabled !== true) {
-        Component = Hero;
-      } else {
-        return;
-      }
-      break;
-    case 'slider':
-      if (disabled !== true) {
-        Component = Slider;
-      } else {
-        return;
-      }
-      break;
-    case 'filteredProductList':
-      if (disabled !== true) {
-        Component = FilteredProductList;
-      } else {
-        return;
-      }
-      break;
-    case 'blurbSection':
-      if (disabled !== true) {
-        Component = BlurbSection;
-      } else {
-        return;
-      }
-      break;
-    case 'uspSection':
-      if (disabled !== true) {
-        Component = USPSection;
-      } else {
-        return;
-      }
-      break;
-    case 'reusableSection':
-      if (disabled !== true) {
-        Component = ReusableSection;
-      } else {
-        return;
-      }
-      break;
-    default:
-      return (
-        <div
-          className={`px-4 lg:px-8 2xl:px-16 ${
-            process.env.NODE_ENV === 'production' ? 'hidden' : ''
-          }`}
-          key={`index-${_key}`}
-        >
-          <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-            <InformationCircleIcon className="mr-1" />
-            {`No matching component (Type: ${_type})`}
-          </span>
-        </div>
-      );
-  }
+//   switch (_type) {
+//     case 'hero':
+//       if (disabled !== true) {
+//         Component = Hero;
+//       } else {
+//         return;
+//       }
+//       break;
+//     case 'slider':
+//       if (disabled !== true) {
+//         Component = Slider;
+//       } else {
+//         return;
+//       }
+//       break;
+//     case 'filteredProductList':
+//       if (disabled !== true) {
+//         Component = FilteredProductList;
+//       } else {
+//         return;
+//       }
+//       break;
+//     case 'blurbSection':
+//       if (disabled !== true) {
+//         Component = BlurbSection;
+//       } else {
+//         return;
+//       }
+//       break;
+//     case 'uspSection':
+//       if (disabled !== true) {
+//         Component = USPSection;
+//       } else {
+//         return;
+//       }
+//       break;
+//     case 'reusableSection':
+//       if (disabled !== true) {
+//         Component = ReusableSection;
+//       } else {
+//         return;
+//       }
+//       break;
+//     default:
+//       return (
+//         <div
+//           className={`px-4 lg:px-8 2xl:px-16 ${
+//             process.env.NODE_ENV === 'production' ? 'hidden' : ''
+//           }`}
+//           key={`index-${_key}`}
+//         >
+//           <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
+//             <InformationCircleIcon className="mr-1" />
+//             {`No matching component (Type: ${_type})`}
+//           </span>
+//         </div>
+//       );
+//   }

-  return Component ? (
-    <Component key={`${_key}`} {...rest} />
-  ) : (
-    <div key={`${_key}`}>Something else</div>
-  );
-};
+//   return Component ? (
+//     <Component key={`${_key}`} {...rest} />
+//   ) : (
+//     <div key={`${_key}`}>Something else</div>
+//   );
+// };

 interface dynamicContentManagerProps {
  content: [] | any;
@@ -96,7 +90,89 @@ interface dynamicContentManagerProps {

 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(
+        (
+          component: { _type: string; _key: number; disabled: boolean; rest: any } | any,
+          index: number
+        ) => {
+          const { _type, _key, disabled, ...rest } = component;
+
+          let Component: any;
+
+          switch (_type) {
+            case 'hero':
+              if (disabled !== true) {
+                Component = Hero;
+              } else {
+                return;
+              }
+              break;
+            case 'slider':
+              if (disabled !== true) {
+                Component = Slider;
+              } else {
+                return;
+              }
+              break;
+            case 'filteredProductList':
+              if (disabled !== true) {
+                Component = FilteredProductList;
+              } else {
+                return;
+              }
+              break;
+            case 'blurbSection':
+              if (disabled !== true) {
+                Component = BlurbSection;
+              } else {
+                return;
+              }
+              break;
+            case 'uspSection':
+              if (disabled !== true) {
+                Component = USPSection;
+              } else {
+                return;
+              }
+              break;
+            case 'reusableSection':
+              if (disabled !== true) {
+                Component = ReusableSection;
+              } else {
+                return;
+              }
+              break;
+            default:
+              return (
+                <div
+                  className={`px-4 lg:px-8 2xl:px-16 ${
+                    process.env.NODE_ENV === 'production' ? 'hidden' : ''
+                  }`}
+                  key={`index-${_key}`}
+                >
+                  <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
+                    <InformationCircleIcon className="mr-1" />
+                    {`No matching component (Type: ${_type})`}
+                  </span>
+                </div>
+              );
+          }
+
+          if (Component && index === 0) {
+            return <Component key={`${_key}`} {...rest} />;
+          } else if (Component) {
+            return (
+              <Suspense key={`${_key}`}>
+                <Component {...rest} />
+              </Suspense>
+            );
+          } else {
+            <div key={`${_key}`}>Something else</div>;
+          }
+        }
+      )}
+    </div>
  );
 };