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

'use client';

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';
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 dynamicContentManagerProps {
  content: [] | any;
}

const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
  return (
    <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>
  );
};

export default DynamicContentManager;