Hero updates

2025-05-14 21:47:51 +00:00 · 2023-08-13 22:38:58 +02:00 · 2023-08-13 22:38:58 +02:00 · 671e3744db
commit 671e3744db
parent accfb6c38c
4 changed files with 196 additions and 101 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -3,7 +3,7 @@ import Header from 'components/layout/header/header';
 import { NextIntlClientProvider } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { supportedLanguages } from '../../i18n-config';
 import './globals.css';

@ -58,8 +58,12 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
      <body className="flex min-h-screen flex-col">
        <NextIntlClientProvider locale={locale} messages={messages}>
          <Header locale={locale} />
-          <main className="flex-1">{children}</main>
-          <Footer locale={locale} />
+          <Suspense>
+            <main className="flex-1">{children}</main>
+          </Suspense>
+          <Suspense>
+            <Footer locale={locale} />
+          </Suspense>
        </NextIntlClientProvider>
      </body>
    </html>
--- 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>
  );
 };

--- a/components/modules/hero/hero.tsx
+++ b/components/modules/hero/hero.tsx
@ -38,9 +38,9 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
          image={image}
          alt={image.alt}
          priority={true}
-          width={1200}
-          height={600}
          className="absolute inset-0 z-10 h-full w-full object-cover"
+          sizes="100vw"
+          fill
        />
      )}
      <div className="absolute bottom-5 left-4 z-50 flex max-w-md flex-col items-start text-high-contrast lg:bottom-8 lg:left-8 lg:max-w-2xl 2xl:bottom-16 2xl:left-16">
--- a/components/ui/sanity-image/sanity-image.tsx
+++ b/components/ui/sanity-image/sanity-image.tsx
@ -13,6 +13,7 @@ interface SanityImageProps {
  quality?: number;
  sizes?: string;
  className?: string;
+  fill?: boolean;
 }

 const placeholderImg = '/product-img-placeholder.svg';
@ -26,24 +27,38 @@ export default function SanityImage(props: SanityImageProps) {
    height = 1080,
    width = 1080,
    sizes = '100vw',
-    className
+    className,
+    fill = false
  } = props;

  const rootClassName = cn('w-full h-auto', className);

  const image = source?.asset?._rev ? (
    <>
-      <Image
-        className={`${rootClassName}`}
-        placeholder="blur"
-        width={width}
-        height={height}
-        alt={alt}
-        src={urlForImage(source).width(width).height(height).quality(quality).url()}
-        sizes={sizes}
-        priority={priority}
-        blurDataURL={source.asset.metadata.lqip}
-      />
+      {fill ? (
+        <Image
+          className={`${rootClassName}`}
+          placeholder="blur"
+          fill
+          alt={alt}
+          src={urlForImage(source).quality(quality).url()}
+          sizes={sizes}
+          priority={priority}
+          blurDataURL={source.asset.metadata.lqip}
+        />
+      ) : (
+        <Image
+          className={`${rootClassName}`}
+          placeholder="blur"
+          width={width}
+          height={height}
+          alt={alt}
+          src={urlForImage(source).width(width).height(height).quality(quality).url()}
+          sizes={sizes}
+          priority={priority}
+          blurDataURL={source.asset.metadata.lqip}
+        />
+      )}
    </>
  ) : (
    <>