MicroClub Scroll Area

1'use client';
2 
3import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
4 
5import { cn } from '@/lib/utils';
6 
7function McScrollArea({
8  className,
9  children,
10  title,
11  desc,
12  ...props
13}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {
14  return (
15    <ScrollAreaPrimitive.Root
16      data-slot="scroll-area"
17      className={cn('relative  rounded-md ring-1 ring-inset ring-border bg-background', className)}
18      {...props}
19    >
20      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className=" size-full">
21        {title && (
22          <div className=" mb-4 mt-4 ml-4 gap-2.5 size-fit">
23            <p className=" font-dm-sans text-4 text-foreground text-normal">{title}</p>
24          </div>
25        )}
26        {desc && (
27          <div className="mx-4  flex flex-col gap-2.5 size-fit">
28            {desc.map((line, i) => (
29              <div key={i} className="px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5">
30                <p className="">{line}</p>
31              </div>
32            ))}
33          </div>
34        )}
35        {children}
36      </ScrollAreaPrimitive.Viewport>
37      <McScrollBar />
38      <ScrollAreaPrimitive.Corner />
39    </ScrollAreaPrimitive.Root>
40  );
41}
42 
43function McScrollBar({
44  className,
45  orientation = 'vertical',
46  ...props
47}: ScrollAreaPrimitive.Scrollbar.Props) {
48  return (
49    <ScrollAreaPrimitive.Scrollbar
50      data-slot="scroll-area-scrollbar"
51      data-orientation={orientation}
52      orientation={orientation}
53      className={cn(
54        'flex touch-none p-px transition-colors select-none ' +
55          ' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3' +
56          ' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
57        className
58      )}
59      {...props}
60    >
61      <ScrollAreaPrimitive.Thumb
62        data-slot="scroll-area-thumb"
63        className="relative flex-1 rounded-full bg-border"
64      />
65    </ScrollAreaPrimitive.Scrollbar>
66  );
67}
68 
69export { McScrollArea, McScrollBar };