scroll-area.tsx raw

   1  import * as React from 'react'
   2  import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
   3  
   4  import { cn } from '@/lib/utils'
   5  
   6  const ScrollArea = React.forwardRef<
   7    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   8    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { scrollBarClassName?: string }
   9  >(({ className, scrollBarClassName, children, ...props }, ref) => (
  10    <ScrollAreaPrimitive.Root className={cn('relative overflow-hidden', className)} {...props}>
  11      <ScrollAreaPrimitive.Viewport ref={ref} className="h-full w-full rounded-[inherit] *:!block">
  12        {children}
  13      </ScrollAreaPrimitive.Viewport>
  14      <ScrollBar className={scrollBarClassName} />
  15      <ScrollAreaPrimitive.Corner />
  16    </ScrollAreaPrimitive.Root>
  17  ))
  18  ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
  19  
  20  const ScrollBar = React.forwardRef<
  21    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  22    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
  23  >(({ className, orientation = 'vertical', ...props }, ref) => (
  24    <ScrollAreaPrimitive.ScrollAreaScrollbar
  25      ref={ref}
  26      orientation={orientation}
  27      className={cn(
  28        'flex touch-none select-none transition-colors',
  29        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
  30        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
  31        className
  32      )}
  33      {...props}
  34    >
  35      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  36    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  37  ))
  38  ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
  39  
  40  export { ScrollArea, ScrollBar }
  41