shi.gg
The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1"use client";
2
3import { cn } from "@/utils/cn";
4import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
5import * as React from "react";
6
7const ScrollArea = React.forwardRef<
8 React.ElementRef<typeof ScrollAreaPrimitive.Root>,
9 React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
10>(({ className, children, ...props }, ref) => (
11 <ScrollAreaPrimitive.Root
12 ref={ref}
13 className={cn("relative overflow-hidden", className)}
14 {...props}
15 >
16 <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
17 {children}
18 </ScrollAreaPrimitive.Viewport>
19 <ScrollBar />
20 <ScrollAreaPrimitive.Corner />
21 </ScrollAreaPrimitive.Root>
22));
23ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
24
25const ScrollBar = React.forwardRef<
26 React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
27 React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
28>(({ className, orientation = "vertical", ...props }, ref) => (
29 <ScrollAreaPrimitive.ScrollAreaScrollbar
30 ref={ref}
31 orientation={orientation}
32 className={cn(
33 "flex touch-none select-none transition-colors",
34 orientation === "vertical" &&
35 "h-full w-2.5 border-l border-l-transparent p-[1px]",
36 orientation === "horizontal" &&
37 "h-2.5 flex-col border-t border-t-transparent p-[1px]",
38 className
39 )}
40 {...props}
41 >
42 <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
43 </ScrollAreaPrimitive.ScrollAreaScrollbar>
44));
45ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
46
47export { ScrollArea, ScrollBar };