diff --git a/web/src/components/ui/carousel.tsx b/web/src/components/ui/carousel.tsx
index 9c2b9bf37..7667f4e83 100644
--- a/web/src/components/ui/carousel.tsx
+++ b/web/src/components/ui/carousel.tsx
@@ -1,43 +1,43 @@
-import * as React from "react"
+import * as React from "react";
import useEmblaCarousel, {
type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps = {
- opts?: CarouselOptions
- plugins?: CarouselPlugin
- orientation?: "horizontal" | "vertical"
- setApi?: (api: CarouselApi) => void
-}
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
type CarouselContextProps = {
- carouselRef: ReturnType[0]
- api: ReturnType[1]
- scrollPrev: () => void
- scrollNext: () => void
- canScrollPrev: boolean
- canScrollNext: boolean
-} & CarouselProps
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
-const CarouselContext = React.createContext(null)
+const CarouselContext = React.createContext(null);
function useCarousel() {
- const context = React.useContext(CarouselContext)
+ const context = React.useContext(CarouselContext);
if (!context) {
- throw new Error("useCarousel must be used within a ")
+ throw new Error("useCarousel must be used within a ");
}
- return context
+ return context;
}
const Carousel = React.forwardRef<
@@ -54,69 +54,69 @@ const Carousel = React.forwardRef<
children,
...props
},
- ref
+ 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
+ return;
}
- setCanScrollPrev(api.canScrollPrev())
- setCanScrollNext(api.canScrollNext())
- }, [])
+ setCanScrollPrev(api.canScrollPrev());
+ setCanScrollNext(api.canScrollNext());
+ }, []);
const scrollPrev = React.useCallback(() => {
- api?.scrollPrev()
- }, [api])
+ api?.scrollPrev();
+ }, [api]);
const scrollNext = React.useCallback(() => {
- api?.scrollNext()
- }, [api])
+ api?.scrollNext();
+ }, [api]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent) => {
if (event.key === "ArrowLeft") {
- event.preventDefault()
- scrollPrev()
+ event.preventDefault();
+ scrollPrev();
} else if (event.key === "ArrowRight") {
- event.preventDefault()
- scrollNext()
+ event.preventDefault();
+ scrollNext();
}
},
- [scrollPrev, scrollNext]
- )
+ [scrollPrev, scrollNext],
+ );
React.useEffect(() => {
if (!api || !setApi) {
- return
+ return;
}
- setApi(api)
- }, [api, setApi])
+ setApi(api);
+ }, [api, setApi]);
React.useEffect(() => {
if (!api) {
- return
+ return;
}
- onSelect(api)
- api.on("reInit", onSelect)
- api.on("select", onSelect)
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
return () => {
- api?.off("select", onSelect)
- }
- }, [api, onSelect])
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
return (
- )
- }
-)
-Carousel.displayName = "Carousel"
+ );
+ },
+);
+Carousel.displayName = "Carousel";
const CarouselContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const { carouselRef, orientation } = useCarousel()
+ const { carouselRef, orientation } = useCarousel();
return (
@@ -161,20 +161,20 @@ const CarouselContent = React.forwardRef<
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
- className
+ className,
)}
{...props}
/>
- )
-})
-CarouselContent.displayName = "CarouselContent"
+ );
+});
+CarouselContent.displayName = "CarouselContent";
const CarouselItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const { orientation } = useCarousel()
+ const { orientation } = useCarousel();
return (
- )
-})
-CarouselItem.displayName = "CarouselItem"
+ );
+});
+CarouselItem.displayName = "CarouselItem";
const CarouselPrevious = React.forwardRef<
HTMLButtonElement,
React.ComponentProps
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
- const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
Previous slide
- )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+ );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
Next slide
- )
-})
-CarouselNext.displayName = "CarouselNext"
+ );
+});
+CarouselNext.displayName = "CarouselNext";
export {
type CarouselApi,
@@ -257,4 +259,4 @@ export {
CarouselItem,
CarouselPrevious,
CarouselNext,
-}
+};
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 857c94900..52cb05473 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -192,6 +192,7 @@ function ConfigEditor() {