scroll-area

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