Glass Scroll Area

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