Structural changes

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

@@ -1,16 +1,16 @@
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
-const Card = dynamic(() => import('components/ui/card'))
+import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
+const Card = dynamic(() => import('components/ui/card'));
 
-import Text from 'components/ui/text'
+import Text from 'components/ui/text';
 
 interface BlurbSectionProps {
-  blurbs: any
-  title: string
-  mobileLayout: string
-  desktopLayout: string
-  imageFormat: 'square' | 'portrait' | 'landscape'
+  blurbs: any;
+  title: string;
+  mobileLayout: string;
+  desktopLayout: string;
+  imageFormat: 'square' | 'portrait' | 'landscape';
 }
 
 const BlurbSection = ({
@@ -18,37 +18,33 @@ const BlurbSection = ({
   mobileLayout,
   desktopLayout,
   blurbs,
-  imageFormat,
+  imageFormat
 }: BlurbSectionProps) => {
   const gridLayout =
     desktopLayout === '2-column'
       ? 'lg:grid-cols-2'
       : desktopLayout === '3-column'
       ? 'lg:grid-cols-3'
-      : 'lg:grid-cols-4'
+      : 'lg:grid-cols-4';
 
-  const sliderLayout =
-    desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4
+  const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4;
 
   return (
     <div>
       {title ? (
-        <Text
-          className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
-          variant="sectionHeading"
-        >
+        <Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
           {title}
         </Text>
       ) : (
         <Text
-          className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
+          className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
           variant="sectionHeading"
         >
           No title provided yet
         </Text>
       )}
       <div
-        className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${
+        className={`grid px-4 ${gridLayout} gap-x-4 gap-y-8 ${
           mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden'
         } lg:px-8 2xl:!px-16`}
       >
@@ -63,15 +59,11 @@ const BlurbSection = ({
                 imageFormat={blurb?.imageFormat}
               />
             </div>
-          )
+          );
         })}
       </div>
 
-      <div
-        className={`${
-          mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
-        }`} 
-      >
+      <div className={`${mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'}`}>
         {blurbs && (
           <Carousel
             gliderClasses={'px-4 lg:px-8 2xl:px-16'}
@@ -80,9 +72,8 @@ const BlurbSection = ({
             responsive={{
               breakpoint: 1024,
               settings: {
-                slidesToShow:
-                  sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout,
-              },
+                slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout
+              }
             }}
           >
             {blurbs.map((blurb: any, index: number) => (
@@ -100,7 +91,7 @@ const BlurbSection = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default BlurbSection
+export default BlurbSection;