|
1
|
import * as React from "react" |
|
2
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" |
|
3
|
|
|
4
|
import { cn } from "@/lib/utils" |
|
5
|
|
|
6
|
const 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
|
)) |
|
22
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName |
|
23
|
|
|
24
|
const 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-[1px]", |
|
35
|
orientation === "horizontal" && |
|
36
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]", |
|
37
|
className |
|
38
|
)} |
|
39
|
{...props} |
|
40
|
> |
|
41
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> |
|
42
|
</ScrollAreaPrimitive.ScrollAreaScrollbar> |
|
43
|
)) |
|
44
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName |
|
45
|
|
|
46
|
export { ScrollArea, ScrollBar } |