Scroll Area

1"use client"
2 
3import * as React from "react"
4import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 
6import { cn } from "@/lib/utils"
7 
8function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
9  return (
10    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative overflow-hidden", className)} {...props}>
11      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/45">
12        {children}
13      </ScrollAreaPrimitive.Viewport>
14      <ScrollBar />
15      <ScrollAreaPrimitive.Corner />
16    </ScrollAreaPrimitive.Root>
17  )
18}
19 
20function ScrollBar({ className, orientation = "vertical", ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
21  return (
22    <ScrollAreaPrimitive.ScrollAreaScrollbar
23      data-slot="scroll-area-scrollbar"
24      orientation={orientation}
25      className={cn("flex touch-none select-none p-0.5 transition-colors data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5", className)}
26      {...props}
27    >
28      <ScrollAreaPrimitive.ScrollAreaThumb data-slot="scroll-area-thumb" className="relative flex-1 rounded-full bg-foreground/18 transition-colors hover:bg-foreground/28" />
29    </ScrollAreaPrimitive.ScrollAreaScrollbar>
30  )
31}
32 
33export { ScrollArea, ScrollBar }