1  "use client"
 2  
 3  import * as React from "react"
 4  import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 5  
 6  import { cn } from "@/lib/utils"
 7  
 8  function ScrollArea({
 9    className,
10    children,
11    ...props
12  }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13    return (
14      <ScrollAreaPrimitive.Root
15        data-slot="scroll-area"
16        className={cn("relative", className)}
17        {...props}
18      >
19        <ScrollAreaPrimitive.Viewport
20          data-slot="scroll-area-viewport"
21          className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
22        >
23          {children}
24        </ScrollAreaPrimitive.Viewport>
25        <ScrollBar />
26        <ScrollAreaPrimitive.Corner />
27      </ScrollAreaPrimitive.Root>
28    )
29  }
30  
31  function ScrollBar({
32    className,
33    orientation = "vertical",
34    ...props
35  }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36    return (
37      <ScrollAreaPrimitive.ScrollAreaScrollbar
38        data-slot="scroll-area-scrollbar"
39        orientation={orientation}
40        className={cn(
41          "flex touch-none p-px transition-colors select-none",
42          orientation === "vertical" &&
43            "h-full w-2.5 border-l border-l-transparent",
44          orientation === "horizontal" &&
45            "h-2.5 flex-col border-t border-t-transparent",
46          className
47        )}
48        {...props}
49      >
50        <ScrollAreaPrimitive.ScrollAreaThumb
51          data-slot="scroll-area-thumb"
52          className="bg-border relative flex-1 rounded-full"
53        />
54      </ScrollAreaPrimitive.ScrollAreaScrollbar>
55    )
56  }
57  
58  export { ScrollArea, ScrollBar }