jaydip.me
1import * as React from "react"
2import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
3
4import { cn } from "@/lib/utils"
5
6const ScrollArea = React.forwardRef<
7 React.ElementRef<typeof ScrollAreaPrimitive.Root>,
8 React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
9>(({ className, children, ...props }, ref) => (
10 <ScrollAreaPrimitive.Root
11 ref={ref}
12 className={cn("relative overflow-hidden", className)}
13 {...props}
14 >
15 <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 {children}
17 </ScrollAreaPrimitive.Viewport>
18 <ScrollBar />
19 <ScrollAreaPrimitive.Corner />
20 </ScrollAreaPrimitive.Root>
21))
22ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23
24const ScrollBar = React.forwardRef<
25 React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27>(({ className, orientation = "vertical", ...props }, ref) => (
28 <ScrollAreaPrimitive.ScrollAreaScrollbar
29 ref={ref}
30 orientation={orientation}
31 className={cn(
32 "flex touch-none select-none transition-colors",
33 orientation === "vertical" &&
34 "h-full w-2.5 border-l border-l-transparent p-px",
35 orientation === "horizontal" &&
36 "h-2.5 flex-col border-t border-t-transparent p-px",
37 className
38 )}
39 {...props}
40 >
41 <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42 </ScrollAreaPrimitive.ScrollAreaScrollbar>
43))
44ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
45
46export { ScrollArea, ScrollBar }