67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
"use client";
|
|
import * as RadixScrollArea from "@radix-ui/react-scroll-area";
|
|
import type { FC } from "react";
|
|
import React from "react";
|
|
import { cn } from "./utils";
|
|
|
|
type TScrollAreaProps = {
|
|
type?: "auto" | "always" | "scroll" | "hover";
|
|
className?: string;
|
|
scrollHideDelay?: number;
|
|
size?: "sm" | "md" | "lg";
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const sizeStyles = {
|
|
sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5",
|
|
md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3",
|
|
lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4",
|
|
};
|
|
|
|
const thumbSizeStyles = {
|
|
sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
|
|
md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
|
|
lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
|
|
};
|
|
|
|
export const ScrollArea: FC<TScrollAreaProps> = (props) => {
|
|
const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props;
|
|
|
|
return (
|
|
<RadixScrollArea.Root
|
|
type={type}
|
|
className={cn("group overflow-hidden", className)}
|
|
scrollHideDelay={scrollHideDelay}
|
|
>
|
|
<RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
|
|
<RadixScrollArea.Scrollbar
|
|
className={cn(
|
|
"group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
|
|
sizeStyles[size]
|
|
)}
|
|
orientation="vertical"
|
|
>
|
|
<RadixScrollArea.Thumb
|
|
className={cn(
|
|
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
|
|
thumbSizeStyles[size]
|
|
)}
|
|
/>
|
|
</RadixScrollArea.Scrollbar>
|
|
<RadixScrollArea.Scrollbar
|
|
className={cn(
|
|
"group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
|
|
sizeStyles[size]
|
|
)}
|
|
orientation="horizontal"
|
|
>
|
|
<RadixScrollArea.Thumb
|
|
className={cn(
|
|
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
|
|
thumbSizeStyles[size]
|
|
)}
|
|
/>
|
|
</RadixScrollArea.Scrollbar>
|
|
</RadixScrollArea.Root>
|
|
);
|
|
};
|