[TRAH] Hamza / TRAH-2615 /Added Carousel component (#12738)

* chore: added carousel component

* chore: removed the types

* chore: removed the code smells

* chore: added default value

* chore: added default value v2

packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel-react';
+import CFDCompareAccountsCarouselButton from './CompareAccountsCarouselButton';
+
+const CompareAccountsCarousel = ({ children }: PropsWithChildren) => {
+    const options: EmblaOptionsType = {
+        align: 0,
+        containScroll: 'trimSnaps',
+    };
+    const [emblaRef, emblaApi] = useEmblaCarousel(options);
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect);
+        emblaApi.on('select', onSelect);
+    }, [emblaApi, onSelect]);
+
+    return (
+        <div className='relative overflow-hidden'>
+            <div className='w-full h-full overflow-hidden pb-3000' ref={emblaRef}>
+                <div className='flex flex-row invisible max-h-screen ease-in-out duration-0 -ml-500 touch-pan-y'>
+                    {children}
+                </div>
+            </div>
+            <CFDCompareAccountsCarouselButton enabled={prevBtnEnabled} onClick={scrollPrev} />
+            <CFDCompareAccountsCarouselButton enabled={nextBtnEnabled} isNext onClick={scrollNext} />
+        </div>
+    );
+};
+
+export default CompareAccountsCarousel;

packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconButton, qtMerge } from '@deriv/quill-design';
+import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
+
+type TPrevNextButtonProps = {
+    enabled: boolean;
+    isNext?: boolean;
+    onClick: () => void;
+};
+
+const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
+    <IconButton
+        className={qtMerge(
+            'bg-system-light-primary-background z-[1] absolute hidden lg:flex items-center justify-center top-1/2 cursor-pointer w-2000 h-2000 rounded-[50%] border-solid border-75 disbaled:opacity-400 disabled:hidden',
+            isNext && 'right-800',
+            !isNext && 'left-800'
+        )}
+        colortyle='text-primary'
+        componentType='icon-only'
+        disabled={!enabled}
+        icon={isNext ? LabelPairedChevronRightMdRegularIcon : LabelPairedChevronLeftMdRegularIcon}
+        isRound
+        onClick={onClick}
+        size='md'
+    />
+);
+export default CFDCompareAccountsCarouselButton;

packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/index.ts

@@ -0,0 +1 @@
+export { default as CompareAccountsCarousel } from './CompareAccountsCarousel';