8-bit Scroll Area

1import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
2 
3import { cn } from "@/lib/utils";
4 
5function ScrollArea({
6  className,
7  children,
8  ...props
9}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
10  return (
11    <ScrollAreaPrimitive.Root
12      data-slot="scroll-area"
13      className={cn("relative", className)}
14      {...props}
15    >
16      <ScrollAreaPrimitive.Viewport
17        data-slot="scroll-area-viewport"
18        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
19      >
20        {children}
21      </ScrollAreaPrimitive.Viewport>
22      <ScrollBar />
23      <ScrollAreaPrimitive.Corner />
24    </ScrollAreaPrimitive.Root>
25  );
26}
27 
28function ScrollBar({
29  className,
30  orientation = "vertical",
31  ...props
32}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
33  return (
34    <ScrollAreaPrimitive.ScrollAreaScrollbar
35      data-slot="scroll-area-scrollbar"
36      orientation={orientation}
37      className={cn(
38        "flex touch-none p-px transition-colors select-none bg-foreground/30 dark:bg-ring/30 relative",
39        orientation === "vertical" &&
40          "h-full w-1.5 border-l border-l-transparent",
41        orientation === "horizontal" &&
42          "h-1.5 flex-col border-t border-t-transparent",
43        className
44      )}
45      {...props}
46    >
47      <ScrollAreaPrimitive.ScrollAreaThumb
48        data-slot="scroll-area-thumb"
49        className={cn(
50          "relative dark:bg-ring rounded-none  flex-1 bg-foreground transition-none duration-75",
51          orientation === "vertical" && "scale-x-250 ",
52          orientation === "horizontal" && "scale-y-250 "
53        )}
54      />
55    </ScrollAreaPrimitive.ScrollAreaScrollbar>
56  );
57}
58 
59export { ScrollArea, ScrollBar };