add slideshow props and props

src/components/elements/slideshow.tsx

@@ -1,35 +1,39 @@
 'use client';
-import React, { useRef } from 'react';
-import Slider, { CustomArrowProps } from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
+import React, { HTMLAttributes, useRef } from 'react';
+import Slider, { CustomArrowProps, Settings } from 'react-slick';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/16/solid';
 
-export type SlideshowProps = {
-  children: React.ReactNode;
-};
-
-type SliderRef = Slider | null;
-
 const NextArrow = ({ onClick }: CustomArrowProps) => {
   return (
-    <button className="absolute top-1/3 right-1 z-50" onClick={onClick}>
-      <ArrowRightIcon className="w-50 text-black-true bg-teal rounded-full p-10" />
+    <button
+      className='absolute top-1/3 right-1 z-50'
+      onClick={onClick}
+      aria-label='Next'
+    >
+      <ArrowRightIcon className='w-50 text-black-true bg-teal rounded-full p-10' />
     </button>
   );
 };
 
 const PrevArrow = ({ onClick }: CustomArrowProps) => {
   return (
-    <button className="absolute top-1/3 left-1 z-50" onClick={onClick}>
-      <ArrowLeftIcon className="w-50 text-black-true bg-teal rounded-full p-10" />
+    <button
+      className='absolute top-1/3 left-1 z-50'
+      onClick={onClick}
+      aria-label='Previous'
+    >
+      <ArrowLeftIcon className='w-50 text-black-true bg-teal rounded-full p-10' />
     </button>
   );
 };
 
-const Slideshow = ({ children }: SlideshowProps) => {
-  const arrowRef = useRef<SliderRef | null>(null);
-  const settings = {
+interface SlideshowProps extends HTMLAttributes<HTMLDivElement> {
+  slideshopProps?: Settings;
+}
+
+const Slideshow = ({ children, slideshopProps, ...props }: SlideshowProps) => {
+  const arrowRef = useRef<Slider>(null);
+  const settings: Settings = {
     className: 'center',
     centerMode: true,
     dots: false,
@@ -50,10 +54,11 @@ const Slideshow = ({ children }: SlideshowProps) => {
         },
       },
     ],
+    ...slideshopProps,
   };
   return (
-    <div className="relative w-full">
-      <Slider ref={arrowRef} {...settings}>
+    <div className='relative w-full'>
+      <Slider ref={arrowRef} {...settings} {...props}>
         {children}
       </Slider>
     </div>