scroll-area

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