Scroll Area

1"use client";23import * as React from "react";4import { ScrollArea as ScrollAreaPrimitive } from "@sprawlify/react/scroll-area";5import { cn } from "@/lib/utils";67function ScrollArea({8  className,9  children,10  ...props11}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {12  return (13    <ScrollAreaPrimitive.Root14      data-slot="scroll-area"15      className={cn("relative", className)}16      {...props}17    >18      <ScrollAreaPrimitive.Viewport19        data-slot="scroll-area-viewport"20        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none"21      >22        {children}23      </ScrollAreaPrimitive.Viewport>24      <ScrollBar />25      <ScrollAreaPrimitive.Corner />26    </ScrollAreaPrimitive.Root>27  );28}2930function ScrollBar({31  className,32  orientation = "vertical",33  ...props34}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {35  return (36    <ScrollAreaPrimitive.Scrollbar37      data-slot="scroll-area-scrollbar"38      data-orientation={orientation}39      orientation={orientation}40      className={cn(41        "data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none",42        className,43      )}44      {...props}45    >46      <ScrollAreaPrimitive.Thumb47        data-slot="scroll-area-thumb"48        className="rounded-full bg-border relative flex-1"49      />50    </ScrollAreaPrimitive.Scrollbar>51  );52}5354export { ScrollArea, ScrollBar };55