draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

scroll-area.tsx (1424B)

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