Scroll area

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