Scroll Area

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