Scroll Area

1'use client';
2 
3import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
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      <ScrollAreaPrimitive.Viewport
19        data-slot="scroll-area-viewport"
20        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
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-1.25 border-l border-l-transparent',
42        orientation === 'horizontal' &&
43          'h-1.25 flex-col border-t border-t-transparent',
44        className,
45      )}
46      {...props}>
47      <ScrollAreaPrimitive.ScrollAreaThumb
48        data-slot="scroll-area-thumb"
49        className="bg-border relative flex-1 rounded-full"
50      />
51    </ScrollAreaPrimitive.ScrollAreaScrollbar>
52  );
53}
54 
55export { ScrollArea, ScrollBar };