Merge pull request layer5io#961 from Vidit-Kushwaha/chore/carousel

refactor: expose Carousel component for external usage

src/custom/CatalogDetail/Carousel.tsx → src/custom/Carousel/Carousel.tsx

@@ -1,5 +1,6 @@
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import React, { ReactNode, useRef } from 'react';
+import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
 
 interface CarouselProps {
   items: ReactNode[];
@@ -9,17 +10,13 @@ interface CarouselProps {
   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') => {

src/custom/Carousel/index.tsx

@@ -0,0 +1,3 @@
+import Carousel from './Carousel';
+
+export { Carousel };

src/custom/Carousel/style.tsx

@@ -0,0 +1,49 @@
+import { styled } from '../../theme';
+
+export const CarouselButton = styled('button')(({ theme }) => ({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  zIndex: '1',
+  background: theme.palette.background.paper,
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.5rem',
+  borderRadius: '50%',
+  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+  '&:hover': {
+    background: theme.palette.primary.main,
+    color: '#fff'
+  },
+  '&:first-of-type': {
+    left: '-1.2rem'
+  },
+  '&:last-of-type': {
+    right: '-1.2rem'
+  }
+}));
+
+export const CarouselWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  position: 'relative'
+});
+
+export const CarouselContainer = styled('div')({
+  display: 'flex',
+  overflowX: 'auto',
+  scrollBehavior: 'smooth',
+  scrollSnapType: 'x mandatory',
+  gap: '1rem',
+  padding: '1rem 0',
+  width: '100%',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  },
+  '.carousel-item': {
+    flex: '0 0 auto',
+    scrollSnapAlign: 'center',
+    width: 'auto'
+  }
+});

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -1,6 +1,6 @@
+import { Carousel } from '../Carousel';
 import { CatalogCardDesignLogo } from '../CustomCatalog';
 import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
-import Carousel from './Carousel';
 import { getHeadingText } from './helper';
 import { AdditionalContainer, ContentHeading } from './style';
 import { UserProfile } from './types';

src/custom/CatalogDetail/style.tsx

@@ -68,51 +68,6 @@ export const ContentHeading = styled('div')(() => ({
   width: '100%',
   marginBottom: '1rem'
 }));
-export const CarouselContainer = styled('div')({
-  display: 'flex',
-  overflowX: 'auto',
-  scrollBehavior: 'smooth',
-  scrollSnapType: 'x mandatory',
-  gap: '1rem',
-  padding: '1rem 0',
-  width: '100%',
-  '&::-webkit-scrollbar': {
-    display: 'none' // Hide scrollbar for a cleaner look
-  },
-  '.carousel-item': {
-    flex: '0 0 auto',
-    scrollSnapAlign: 'center',
-    width: 'auto' // Adjust based on your card size
-  }
-});
-export const CarouselButton = styled('button')(({ theme }) => ({
-  position: 'absolute',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  zIndex: '1',
-  background: theme.palette.background.paper,
-  border: 'none',
-  cursor: 'pointer',
-  padding: '0.5rem',
-  borderRadius: '50%',
-  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-  '&:hover': {
-    background: theme.palette.primary.main,
-    color: '#fff'
-  },
-  '&:first-of-type': {
-    left: '-1.2rem'
-  },
-  '&:last-of-type': {
-    right: '-1.2rem'
-  }
-}));
-export const CarouselWrapper = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  position: 'relative'
-});
 
 export const CaveatsContainer = styled('div')(({ theme }) => ({
   width: '100%',

src/custom/index.tsx

@@ -1,6 +1,7 @@
 import { ActionButton } from './ActionButton';
 import { BBChart } from './BBChart';
 import { BookmarkNotification } from './BookmarkNotification';
+import { Carousel } from './Carousel';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ChapterCard } from './ChapterCard';
 import { CollaboratorAvatarGroup } from './CollaboratorAvatarGroup';
@@ -72,6 +73,7 @@ export {
   ActionButton,
   BBChart,
   BookmarkNotification,
+  Carousel,
   CatalogCardDesignLogo,
   CatalogFilter,
   ChapterCard,