Merge pull request #1034 from vr-varad/fix/responsive_issue_catalog_2

Fix: Carousel For Performance Section

Author: amitamrutiya

src/custom/PerformersSection/PerformersSection.tsx

@@ -9,6 +9,7 @@ import {
   TropyIcon
 } from '../../icons';
 import { useTheme } from '../../theme';
+import { Carousel } from '../Carousel';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { StateCardSekeleton } from './PerformersToogleButton';
@@ -284,6 +285,17 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
       </MainContainer>
     );
 
+  const statComponents = stats.map((stat, index) => (
+    <StatCard
+      key={`${stat.id}-${index}`}
+      {...stat}
+      onCardClick={onCardClick}
+      onIconClick={onIconClick}
+      onAuthorClick={onAuthorClick}
+      onStatusClick={onStatusClick}
+    />
+  ));
+
   return (
     <ErrorBoundary>
       <MainContainer>
@@ -299,17 +311,7 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
         </Title>
         <CardsContainer>
           {isLoading && <StateCardSekeleton />}
-          {!isLoading &&
-            stats.map((stat, index) => (
-              <StatCard
-                key={`${stat.id}-${index}`}
-                {...stat}
-                onCardClick={onCardClick}
-                onIconClick={onIconClick}
-                onAuthorClick={onAuthorClick}
-                onStatusClick={onStatusClick}
-              />
-            ))}
+          <Carousel items={statComponents} />
         </CardsContainer>
       </MainContainer>
     </ErrorBoundary>

src/custom/PerformersSection/styles.tsx

@@ -222,10 +222,9 @@ export const UserNameText = styled(Typography)(({ theme }) => ({
 
 export const CardsContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
-  gap: '18px',
+  gap: '15px',
   width: '100%',
-  overflowX: 'auto',
-  padding: '18px',
+  padding: '20px',
   background:
     theme.palette.mode === 'light'
       ? theme.palette.background.default