diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 3301eecf..284317cb 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -129,8 +129,8 @@ const NewContent = (props: { group: string; type: string }) => {
))}
-
-
+
+
) : (
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index a56cc9de..e97c697a 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,9 +1,7 @@
"use client";
import * as React from "react";
-import useEmblaCarousel, {
- type UseEmblaCarouselType,
-} from "embla-carousel-react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
@@ -42,162 +40,109 @@ function useCarousel() {
return context;
}
-const Carousel = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & CarouselProps
->(
- (
+const Carousel = React.forwardRef & CarouselProps>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+ const [carouselRef, api] = useEmblaCarousel(
{
- orientation = "horizontal",
- opts,
- setApi,
- plugins,
- className,
- children,
- ...props
+ ...opts,
+ axis: orientation === "horizontal" ? "x" : "y",
},
- ref
- ) => {
- const [carouselRef, api] = useEmblaCarousel(
- {
- ...opts,
- axis: orientation === "horizontal" ? "x" : "y",
- },
- plugins
- );
- const [canScrollPrev, setCanScrollPrev] = React.useState(false);
- const [canScrollNext, setCanScrollNext] = React.useState(false);
+ plugins
+ );
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+ const [canScrollNext, setCanScrollNext] = React.useState(false);
- const onSelect = React.useCallback((api: CarouselApi) => {
- if (!api) {
- return;
+ const onSelect = React.useCallback((api: CarouselApi) => {
+ if (!api) {
+ return;
+ }
+
+ setCanScrollPrev(api.canScrollPrev());
+ setCanScrollNext(api.canScrollNext());
+ }, []);
+
+ const scrollPrev = React.useCallback(() => {
+ api?.scrollPrev();
+ }, [api]);
+
+ const scrollNext = React.useCallback(() => {
+ api?.scrollNext();
+ }, [api]);
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ scrollPrev();
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ scrollNext();
}
+ },
+ [scrollPrev, scrollNext]
+ );
- setCanScrollPrev(api.canScrollPrev());
- setCanScrollNext(api.canScrollNext());
- }, []);
+ React.useEffect(() => {
+ if (!api || !setApi) {
+ return;
+ }
- const scrollPrev = React.useCallback(() => {
- api?.scrollPrev();
- }, [api]);
+ setApi(api);
+ }, [api, setApi]);
- const scrollNext = React.useCallback(() => {
- api?.scrollNext();
- }, [api]);
+ React.useEffect(() => {
+ if (!api) {
+ return;
+ }
- const handleKeyDown = React.useCallback(
- (event: React.KeyboardEvent) => {
- if (event.key === "ArrowLeft") {
- event.preventDefault();
- scrollPrev();
- } else if (event.key === "ArrowRight") {
- event.preventDefault();
- scrollNext();
- }
- },
- [scrollPrev, scrollNext]
- );
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
- React.useEffect(() => {
- if (!api || !setApi) {
- return;
- }
+ return () => {
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
- setApi(api);
- }, [api, setApi]);
-
- React.useEffect(() => {
- if (!api) {
- return;
- }
-
- onSelect(api);
- api.on("reInit", onSelect);
- api.on("select", onSelect);
-
- return () => {
- api?.off("select", onSelect);
- };
- }, [api, onSelect]);
-
- return (
-
-
- {children}
-
-
- );
- }
-);
+ return (
+
+
+ {children}
+
+
+ );
+});
Carousel.displayName = "Carousel";
-const CarouselContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
+const CarouselContent = React.forwardRef>(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel();
return (
);
});
CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
+const CarouselItem = React.forwardRef>(({ className, ...props }, ref) => {
const { orientation } = useCarousel();
- return (
-
- );
+ return ;
});
CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+const CarouselPrevious = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
@@ -205,13 +150,7 @@ const CarouselPrevious = React.forwardRef<
ref={ref}
variant={variant}
size={size}
- className={cn(
- "absolute h-6 w-6 rounded-full text-white bg-black -ml-6",
- orientation === "horizontal"
- ? "-left-0 top-1/2 -translate-y-1/2"
- : "-top-0 left-1/2 -translate-x-1/2 rotate-90",
- className
- )}
+ className={cn("absolute h-6 w-6 rounded-full text-white bg-black -ml-6", orientation === "horizontal" ? "-left-0 top-1/2 -translate-y-1/2" : "-top-0 left-1/2 -translate-x-1/2 rotate-90", className)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
@@ -223,10 +162,7 @@ const CarouselPrevious = React.forwardRef<
});
CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+const CarouselNext = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
@@ -234,13 +170,7 @@ const CarouselNext = React.forwardRef<
ref={ref}
variant={variant}
size={size}
- className={cn(
- "absolute h-6 w-6 rounded-full bg-black text-white -mr-4",
- orientation === "horizontal"
- ? "-right-0 top-1/2 -translate-y-1/2"
- : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90",
- className
- )}
+ className={cn("absolute h-6 w-6 rounded-full bg-black text-white -mr-6", orientation === "horizontal" ? "-right-0 top-1/2 -translate-y-1/2" : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90", className)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
@@ -252,11 +182,4 @@ const CarouselNext = React.forwardRef<
});
CarouselNext.displayName = "CarouselNext";
-export {
- type CarouselApi,
- Carousel,
- CarouselContent,
- CarouselItem,
- CarouselPrevious,
- CarouselNext,
-};
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };