feat(ui): create ScrollArea component

src/client/components/ui/ScrollArea/ScrollArea.module.css

@@ -0,0 +1,26 @@
+.viewport {
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+}
+
+.scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  transition: color 0.3s ease;
+}
+
+.scrollbarVertical {
+  height: 100%;
+  width: 0.625rem;
+  border-left: 1px solid transparent;
+  padding: 0 1px;
+}
+
+.scrollbarHorizontal {
+  flex-direction: column;
+  height: 0.625rem;
+  border-top: 1px solid transparent;
+  padding: 0 1px;
+}

src/client/components/ui/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import clsx from 'clsx';
+import styles from './ScrollArea.module.css';
+
+const ScrollBar = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>(
+  ({ className, orientation = 'vertical', ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      ref={ref}
+      orientation={orientation}
+      className={clsx(styles.scrollbar, { [styles.scrollbarVertical!]: orientation === 'vertical', [styles.scrollbarHorizontal!]: orientation === 'horizontal' }, className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className={clsx('position-relative rounded-pill bg-muted', orientation === 'vertical' && 'flex-grow-1')} />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  ),
+);
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { maxHeight: number }>(
+  ({ className, children, ...props }, ref) => (
+    <ScrollAreaPrimitive.Root ref={ref} className={clsx('position-relative overflow-hidden', className)} {...props}>
+      <ScrollAreaPrimitive.Viewport style={{ maxHeight: props.maxHeight }} className={clsx(styles.viewport, 'w-100')}>
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  ),
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+export { ScrollArea, ScrollBar };

src/client/components/ui/ScrollArea/index.ts

@@ -0,0 +1 @@
+export { ScrollArea } from './ScrollArea';