diff --git a/index.html b/index.html
index 8fbf728..962bd40 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
Jumble
-
+
- {parentEvent && (
-
-
-
-
-
- )}
+ {parentEvent && (
+
+
+
+
+
+ )}
@@ -15,7 +13,7 @@ type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
- orientation?: "horizontal" | "vertical"
+ orientation?: 'horizontal' | 'vertical'
setApi?: (api: CarouselApi) => void
}
@@ -34,7 +32,7 @@ function useCarousel() {
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
@@ -43,218 +41,193 @@ function useCarousel() {
const Carousel = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes & 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)
-
- const onSelect = React.useCallback((api: CarouselApi) => {
- if (!api) {
- return
+ plugins
+ )
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+ 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())
- }, [])
-
- const scrollPrev = React.useCallback(() => {
- api?.scrollPrev()
- }, [api])
-
- const scrollNext = React.useCallback(() => {
- api?.scrollNext()
- }, [api])
+ React.useEffect(() => {
+ if (!api || !setApi) {
+ 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]
- )
+ setApi(api)
+ }, [api, setApi])
- React.useEffect(() => {
- if (!api || !setApi) {
- return
- }
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
- setApi(api)
- }, [api, setApi])
+ onSelect(api)
+ api.on('reInit', onSelect)
+ api.on('select', onSelect)
- React.useEffect(() => {
- if (!api) {
- return
- }
+ return () => {
+ api?.off('select', onSelect)
+ }
+ }, [api, onSelect])
- onSelect(api)
- api.on("reInit", onSelect)
- api.on("select", onSelect)
+ return (
+
+
+ {children}
+
+
+ )
+})
+Carousel.displayName = 'Carousel'
- return () => {
- api?.off("select", onSelect)
- }
- }, [api, onSelect])
+const CarouselContent = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel()
return (
-
+
)
}
)
-Carousel.displayName = "Carousel"
+CarouselContent.displayName = 'CarouselContent'
-const CarouselContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- const { carouselRef, orientation } = useCarousel()
+const CarouselItem = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
- return (
-
- )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- 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 CarouselPrevious = React.forwardRef>(
+ ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
- return (
-
- )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+ return (
+
+ )
+ }
+)
+CarouselPrevious.displayName = 'CarouselPrevious'
-const CarouselNext = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
+const CarouselNext = React.forwardRef>(
+ ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
- return (
-
- )
-})
-CarouselNext.displayName = "CarouselNext"
+ return (
+
+ )
+ }
+)
+CarouselNext.displayName = 'CarouselNext'
-export {
- type CarouselApi,
- Carousel,
- CarouselContent,
- CarouselItem,
- CarouselPrevious,
- CarouselNext,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 85d83be..c5048c8 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Tabs = TabsPrimitive.Root
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<