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