feat: some improvements

Signed-off-by: TheFaheem <faheemmushtaq89@gmail.com>

Author: FaheemOnHub

src/custom/CatalogDetail/Carousel.tsx

@@ -0,0 +1,57 @@
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import React, { ReactNode, useRef } from 'react';
+
+interface CarouselProps {
+  items: ReactNode[];
+  title?: string;
+  scrollAmount?: number;
+  showNavButtons?: boolean;
+  itemClassName?: string;
+}
+
+import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
+
+const Carousel: React.FC<CarouselProps> = ({
+  items,
+  scrollAmount = 300,
+  showNavButtons = true,
+  itemClassName = 'carousel-item'
+}) => {
+  const carouselRef = useRef<HTMLDivElement>(null);
+
+  // Skip rendering if no items
+  if (!items.length) return null;
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  return (
+    <CarouselWrapper>
+      {showNavButtons && (
+        <CarouselButton onClick={() => scroll('left')}>
+          <ChevronLeft />
+        </CarouselButton>
+      )}
+      <CarouselContainer ref={carouselRef}>
+        {items.map((item, index) => (
+          <div key={`carousel-item-${index}`} className={itemClassName}>
+            {item}
+          </div>
+        ))}
+      </CarouselContainer>
+      {showNavButtons && (
+        <CarouselButton onClick={() => scroll('right')}>
+          <ChevronRight />
+        </CarouselButton>
+      )}
+    </CarouselWrapper>
+  );
+};
+
+export default Carousel;

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -1,17 +1,9 @@
-import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { useRef } from 'react';
 import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
+import Carousel from './Carousel';
 import { getHeadingText } from './helper';
-import {
-  AdditionalContainer,
-  CarouselButton,
-  CarouselContainer,
-  CarouselWrapper,
-  ContentHeading
-} from './style';
+import { AdditionalContainer, ContentHeading } from './style';
 import { UserProfile } from './types';
-
 export interface PatternsPerUser {
   patterns: Pattern[];
 }
@@ -45,7 +37,6 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
   fetchingOrgError,
   filterByType
 }) => {
-  const carouselRef = useRef<HTMLDivElement>(null);
   const filteredPatterns = filterByType
     ? detailsByType?.patterns?.filter((pattern) => pattern.id !== details.id) || []
     : patternsPerUser?.patterns?.filter((pattern) => pattern.id !== details.id) || [];
@@ -57,15 +48,26 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
       ? 'Unknown Organization'
       : orgName;
 
-  const scroll = (direction: 'left' | 'right') => {
-    if (carouselRef.current) {
-      const scrollAmount = 300; // Adjust scroll distance per click
-      carouselRef.current.scrollBy({
-        left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
-      });
-    }
-  };
+  const carouselItems = filteredPatterns.map((pattern) => (
+    <CustomCatalogCard
+      pattern={pattern}
+      patternType={type}
+      onCardClick={() => onSuggestedPatternClick(pattern)}
+      UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
+      avatarUrl={userProfile?.avatar_url}
+      basePath={technologySVGPath}
+      subBasePath={technologySVGSubpath}
+      cardTechnologies={true}
+    >
+      <CatalogCardDesignLogo
+        imgURL={pattern?.catalog_data?.imageURL}
+        height={'5.5rem'}
+        width={'100%'}
+        zoomEffect={false}
+        type={{ type: type }}
+      />
+    </CustomCatalogCard>
+  ));
   return (
     <AdditionalContainer>
       <ContentHeading>
@@ -75,38 +77,7 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
             : getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
         </h2>
       </ContentHeading>
-      <CarouselWrapper>
-        <CarouselButton onClick={() => scroll('left')}>
-          <ChevronLeft />
-        </CarouselButton>
-        <CarouselContainer ref={carouselRef}>
-          {filteredPatterns.map((pattern, index) => (
-            <div key={`design-${index}`} className="carousel-item">
-              <CustomCatalogCard
-                pattern={pattern}
-                patternType={type}
-                onCardClick={() => onSuggestedPatternClick(pattern)}
-                UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
-                avatarUrl={userProfile?.avatar_url}
-                basePath={technologySVGPath}
-                subBasePath={technologySVGSubpath}
-                cardTechnologies={true}
-              >
-                <CatalogCardDesignLogo
-                  imgURL={pattern?.catalog_data?.imageURL}
-                  height={'5.5rem'}
-                  width={'100%'}
-                  zoomEffect={false}
-                  type={{ type: type }}
-                />
-              </CustomCatalogCard>
-            </div>
-          ))}
-        </CarouselContainer>
-        <CarouselButton onClick={() => scroll('right')}>
-          <ChevronRight />
-        </CarouselButton>
-      </CarouselWrapper>
+      <Carousel items={carouselItems} scrollAmount={300} />
     </AdditionalContainer>
   );
 };