scroll-area

1"use client"
2
3import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
4
5import * as React from "react"
6
7import { cn } from "@/lib/utils"
8
9function ScrollArea({
10  className,
11  children,
12  ...props
13}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
14  return (
15    <ScrollAreaPrimitive.Root
16      data-slot="scroll-area"
17      className={cn("relative overflow-hidden", className)}
18      {...props}
19    >
20      <ScrollAreaPrimitive.Viewport className="h-full w-full font-base">
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 select-none transition-colors",
40        orientation === "vertical" &&
41          "h-full w-2.5 border-l border-l-transparent p-[1px]",
42        orientation === "horizontal" &&
43          "h-2.5 flex-col border-t border-t-transparent p-[1px]",
44        className,
45      )}
46      {...props}
47    >
48      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
49    </ScrollAreaPrimitive.ScrollAreaScrollbar>
50  )
51}
52
53export { ScrollArea, ScrollBar }
54