Refactored queries a bit

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

@@ -5,8 +5,6 @@ import ReusableSection from '@/components/modules/reusable-section/reusable-sect
 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;
@@ -18,61 +16,25 @@ const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentCompo
 
   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;
   }
 
   return Component ? (
@@ -88,9 +50,7 @@ interface dynamicContentManagerProps {
 
 const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
   return (
-    <div className="dynamic-content overflow-x-hidden">
-      <Suspense fallback={<div>Loading...</div>}>{content?.map(getContentComponent)}</Suspense>
-    </div>
+    <div className="dynamic-content overflow-x-hidden">{content?.map(getContentComponent)}</div>
   );
 };
 

components/modules/blurb-section/blurb-section.tsx

@@ -2,6 +2,7 @@ import Card from '@/components/ui/card/card';
 import { cn } from '@/lib/utils';
 import Text from 'components/ui/text';
 interface BlurbSectionProps {
+  disabled: boolean;
   blurbs: any;
   title: string;
   mobileLayout: string;
@@ -10,6 +11,7 @@ interface BlurbSectionProps {
 }
 
 const BlurbSection = ({
+  disabled,
   title,
   mobileLayout,
   desktopLayout,
@@ -23,6 +25,10 @@ const BlurbSection = ({
       ? 'lg:grid-cols-3'
       : 'lg:grid-cols-4';
 
+  if (disabled) {
+    return;
+  }
+
   return (
     <div>
       {title ? (

components/modules/filtered-product-list/filtered-product-list.tsx

@@ -4,12 +4,17 @@ import ProductCard from '@/components/ui/product-card/product-card';
 import Text from 'components/ui/text';
 
 interface SliderProps {
+  disabled: boolean;
   products: any;
   title: string;
   itemsToShow: number;
 }
 
-const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
+const FilteredProductList = ({ disabled, title, products, itemsToShow }: SliderProps) => {
+  if (disabled) {
+    return;
+  }
+
   return (
     <div className="px-4 lg:px-8 2xl:px-16">
       {title ? (

components/modules/hero/hero.tsx

@@ -3,6 +3,7 @@ import Link from 'components/ui/link/link';
 import Text from 'components/ui/text/text';
 
 interface HeroProps {
+  disabled: boolean;
   variant: string;
   text?: string;
   label?: string;
@@ -28,7 +29,21 @@ const heroSize = {
   halfScreen: 'aspect-square max-h-[50vh] lg:aspect-auto lg:min-h-[50vh]'
 };
 
-const Hero = ({ variant, title, text, label, image, link, color, overlay }: HeroProps) => {
+const Hero = ({
+  disabled,
+  variant,
+  title,
+  text,
+  label,
+  image,
+  link,
+  color,
+  overlay
+}: HeroProps) => {
+  if (disabled) {
+    return;
+  }
+
   const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
 
   return (

components/modules/reusable-section/reusable-section.tsx

@@ -1,6 +1,7 @@
 import DynamicContentManager from 'components/layout/dynamic-content-manager';
 
 interface ReusableSectionProps {
+  disabled: boolean;
   section: {
     existingSection: {
       section: {
@@ -10,7 +11,11 @@ interface ReusableSectionProps {
   };
 }
 
-const ReusableSection = ({ section }: ReusableSectionProps) => {
+const ReusableSection = ({ disabled, section }: ReusableSectionProps) => {
+  if (disabled) {
+    return;
+  }
+
   const data = section.existingSection.section.sectionType;
 
   if (!data) {

components/modules/slider/slider.tsx

@@ -8,13 +8,18 @@ import CategoryCard from '@/components/ui/category-card/category-card';
 import ProductCard from '@/components/ui/product-card/product-card';
 
 interface SliderProps {
+  disabled: boolean;
   products: [] | any;
   title: string;
   categories: [] | any;
   sliderType: String;
 }
 
-const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
+const Slider = ({ disabled, products, categories, title, sliderType }: SliderProps) => {
+  if (disabled) {
+    return;
+  }
+
   const [items, setItems] = useState([]);
 
   useEffect(() => {

components/modules/usp-section/usp-section.tsx

@@ -1,10 +1,15 @@
-import SanityImage from '../../ui/sanity-image';
+import SanityImage from '@/components/ui/sanity-image';
 
 interface USPSectionProps {
+  disabled: boolean;
   usps: [] | any;
 }
 
-const USPSection = ({ usps }: USPSectionProps) => {
+const USPSection = ({ disabled, usps }: USPSectionProps) => {
+  if (disabled) {
+    return;
+  }
+
   const desktopGridLayout = usps.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3';
 
   return (

components/price.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 
 const Price = ({
   amount,
@@ -17,7 +17,7 @@ const Price = ({
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
     }).format(parseFloat(amount))}`}
-    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
+    <span className={cn('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
   </p>
 );
 

components/ui/sanity-image/sanity-image.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils';
+import { getImageDimensions } from '@sanity/asset-utils';
 import { urlForImage } from 'lib/sanity/sanity.image';
 import Image from 'next/image';
 
@@ -17,102 +18,44 @@ interface SanityImageProps {
 
 export default function SanityImage({
   image,
-  alt = '',
-  width = 3500,
-  height = 2000,
+  alt = image?.alt ?? 'An image without an alt, whoops',
   size = '100vw',
   fill = false,
   priority = false,
+  width,
+  height,
   className
 }: SanityImageProps) {
-  const imageUrl = image && urlForImage(image)?.height(height).width(width).fit('crop').url();
+  const imageUrl = image && urlForImage(image).url();
 
   return (
-    <div className={cn('w-full overflow-hidden bg-subtle', className)}>
+    <div className={cn('relative w-full overflow-hidden bg-subtle', className)}>
       {fill && imageUrl && (
         <Image
-          fill={fill}
-          className="absolute h-full w-full object-cover"
-          alt={alt}
-          sizes={size}
           src={imageUrl}
-          placeholder="blur"
+          alt={alt}
+          fill={fill}
+          className={cn('absolute h-full w-full object-cover', className)}
+          sizes={size}
           priority={priority}
-          blurDataURL={image.asset.metadata.lqip}
+          placeholder="blur"
+          blurDataURL={urlForImage(image).width(24).height(24).blur(10).url()}
         />
       )}
 
       {imageUrl && (
         <Image
-          className="absolute h-full w-full bg-subtle object-cover"
-          alt={alt ? alt : ''}
-          width={width}
-          height={height}
-          sizes={size}
           src={imageUrl}
-          placeholder="blur"
+          alt={alt}
+          className={cn(className)}
+          width={width ?? getImageDimensions(image).width}
+          height={height ?? getImageDimensions(image).height}
+          sizes={size}
           priority={priority}
-          blurDataURL={image.asset.metadata.lqip}
+          placeholder="blur"
+          blurDataURL={urlForImage(image).width(24).height(24).blur(10).url()}
         />
       )}
     </div>
   );
 }
-
-// export default function SanityImage(props: SanityImageProps) {
-//   const {
-//     image: source,
-//     priority = false,
-//     alt = '',
-//     height = 1080,
-//     width = 1080,
-//     sizes = '100vw',
-//     className,
-//     fill = false
-//   } = props;
-
-//   const rootClassName = cn('w-full h-auto', className);
-
-//   const image = source?.asset ? (
-//     <>
-//       {fill ? (
-//         <Image
-//           className={`${rootClassName}`}
-//           placeholder="blur"
-//           fill
-//           alt={alt}
-//           src={urlForImage(source).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).url()}
-//           sizes={sizes}
-//           priority={priority}
-//           blurDataURL={source.asset.metadata.lqip}
-//         />
-//       )}
-//     </>
-//   ) : (
-//     <>
-//       <Image
-//         className={`${rootClassName}`}
-//         width={width}
-//         height={height}
-//         alt={alt}
-//         src={placeholderImg}
-//         sizes={sizes}
-//         priority={false}
-//       />
-//     </>
-//   );
-
-//   return image;
-// }

lib/sanity/queries.tsx

@@ -7,11 +7,6 @@ export const imageFields = `
   "height": asset->metadata.dimensions.height,
   asset-> {
     _id,
-    assetId,
-    metadata,
-    _type,
-    _ref,
-    _rev
   }
 `;
 
@@ -26,6 +21,7 @@ export const seoFields = `
 // Construct our "Modules" GROQ
 export const modules = `
   _type == 'hero' => {
+    disabled,
     _type,
     _key,
     label,
@@ -44,6 +40,7 @@ export const modules = `
     }
   },
   _type == 'filteredProductList' => {
+    disabled,
     _type,
     _key,
     title,
@@ -64,6 +61,7 @@ export const modules = `
     }
   },
   _type == 'slider' => {
+    disabled,
     _type,
     _key,
     title,

package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-navigation-menu": "^1.1.3",
+    "@sanity/asset-utils": "^1.3.0",
     "@sanity/client": "^6.4.4",
     "@sanity/document-internationalization": "^2.0.1",
     "@sanity/icons": "^2.4.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@radix-ui/react-navigation-menu':
     specifier: ^1.1.3
     version: 1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)
+  '@sanity/asset-utils':
+    specifier: ^1.3.0
+    version: 1.3.0
   '@sanity/client':
     specifier: ^6.4.4
     version: 6.4.4