fix: remove carousel navigation buttons from having anchor wrappers

Author: SpectralQuill

app/(home)/components/SponsorsDesktop.tsx

@@ -176,9 +176,10 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
             }}
           >
             {/* Previous Button */}
-            <a onClick={autoPlayInteraction}>
-              <CarouselPrevious className="absolute left-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20" />
-            </a>
+            <CarouselPrevious
+              className="absolute left-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20"
+              customOnClick={autoPlayInteraction}
+            />
 
             {/* Carousel Content */}
             <CarouselContent>
@@ -220,9 +221,10 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
             </CarouselContent>
 
             {/* Next Button */}
-            <a onClick={autoPlayInteraction}>
-              <CarouselNext className="absolute right-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20" />
-            </a>
+            <CarouselNext
+              className="absolute right-[-64px] z-10 h-16 w-16 sm:w-20 sm:h-20"
+              customOnClick={autoPlayInteraction}
+            />
           </Carousel>
         </div>
         {/* Dots Navigation */}

components/ui/carousel.tsx

@@ -32,6 +32,10 @@ type CarouselContextProps = {
   canScrollNext: boolean;
 } & CarouselProps;
 
+type CarouselNavProps = {
+  customOnClick?: () => void;
+};
+
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
@@ -235,10 +239,15 @@ CarouselItem.displayName = 'CarouselItem';
 
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = 'transparent', size = 'icon', ...props }, ref) => {
+  React.ComponentProps<typeof Button> & CarouselNavProps
+>(({ className, variant = 'transparent', size = 'icon', customOnClick, ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
+  const handleClick = () => {
+    scrollPrev();
+    if (customOnClick) customOnClick();
+  };
+
   return (
     <Button
       ref={ref}
@@ -252,7 +261,7 @@ const CarouselPrevious = React.forwardRef<
         className
       )}
       disabled={!canScrollPrev}
-      onClick={scrollPrev}
+      onClick={handleClick}
       {...props}
     >
       <ChevronLeft className="!h-full !w-full text-primary" />
@@ -264,10 +273,15 @@ CarouselPrevious.displayName = 'CarouselPrevious';
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = 'transparent', size = 'icon', ...props }, ref) => {
+  React.ComponentProps<typeof Button> & CarouselNavProps
+>(({ className, variant = 'transparent', size = 'icon', customOnClick, ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
 
+  const handleClick = () => {
+    scrollNext();
+    if (customOnClick) customOnClick();
+  }
+
   return (
     <Button
       ref={ref}
@@ -281,7 +295,7 @@ const CarouselNext = React.forwardRef<
         className
       )}
       disabled={!canScrollNext}
-      onClick={scrollNext}
+      onClick={handleClick}
       {...props}
     >
       <ChevronRight className="!h-full !w-full text-primary" />