Updates

components/modules/carousel/carousel.tsx

@@ -1,28 +1,28 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 import 'glider-js/glider.min.css';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
 import React from 'react';
 import Glider from 'react-glider';
 
 export interface CarouselItemProps {
-  children: React.ReactNode
-  className?: string
+  children: React.ReactNode;
+  className?: string;
 }
 
 export const CarouselItem: React.FC<CarouselItemProps> = ({
   children,
   className = 'ml-2 first:ml-0 lg:ml-4'
 }: CarouselItemProps) => {
-  return <div className={className}>{children}</div>
-}
+  return <div className={className}>{children}</div>;
+};
 
 export interface CarouselProps {
-  children: JSX.Element | JSX.Element[] | any
-  gliderClasses?: string
-  hasArrows?: boolean
-  hasDots?: boolean
-  slidesToShow?: number
-  slidesToScroll?: number
-  responsive?: any
+  children: JSX.Element | JSX.Element[] | any;
+  gliderClasses?: string;
+  hasArrows?: boolean;
+  hasDots?: boolean;
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  responsive?: any;
 }
 
 export const Carousel: React.FC<CarouselProps> = ({
@@ -32,29 +32,26 @@ export const Carousel: React.FC<CarouselProps> = ({
   hasDots = true,
   slidesToShow = 1,
   slidesToScroll = 1,
-  responsive,
+  responsive
 }) => {
-
-
   return (
     <>
       <Glider
-        className={`block relative ${gliderClasses}`}
+        className={`relative block ${gliderClasses}`}
         draggable
         slidesToShow={slidesToShow}
         scrollLock
         slidesToScroll={slidesToScroll}
         hasArrows={hasArrows}
         hasDots={hasDots}
-        iconLeft={<ArrowLeft className="stroke-current" />}
-        iconRight={<ArrowRight className="stroke-current" />}
+        iconLeft={<ArrowLeftIcon className="h-6 w-6" />}
+        iconRight={<ArrowRightIcon className="h-6 w-6" />}
         responsive={[responsive]}
       >
-          {React.Children.map(children, (child) => {
-            return React.cloneElement(child)
-          })}
-
+        {React.Children.map(children, (child) => {
+          return React.cloneElement(child);
+        })}
       </Glider>
     </>
-  )
-}
+  );
+};