Scroll Area

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