Jerry
49 lines
1.3 KiB
React
49 lines
1.3 KiB
React
"use client"
|
|
|
|
import { cn } from "@/ui/utils"
|
|
|
|
function ScrollArea({
|
|
className,
|
|
viewportClassName,
|
|
scrollbars = "vertical",
|
|
type: _type,
|
|
scrollHideDelay: _scrollHideDelay,
|
|
children,
|
|
...props
|
|
}) {
|
|
const scrollbarOrientations = Array.isArray(scrollbars)
|
|
? scrollbars
|
|
: [scrollbars].filter(Boolean);
|
|
const hasHorizontalScrollbar = scrollbarOrientations.includes("horizontal");
|
|
const hasVerticalScrollbar = scrollbarOrientations.includes("vertical");
|
|
const overflowX = hasHorizontalScrollbar ? "overflow-x-auto" : "overflow-x-hidden";
|
|
const overflowY = hasVerticalScrollbar ? "overflow-y-auto" : "overflow-y-hidden";
|
|
|
|
return (
|
|
<div data-slot="scroll-area" className={cn("relative", className)} {...props}>
|
|
<div
|
|
data-slot="scroll-area-viewport"
|
|
className={cn(
|
|
"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
|
|
overflowX,
|
|
overflowY,
|
|
viewportClassName
|
|
)}>
|
|
<div className={cn("min-w-full", hasHorizontalScrollbar ? "w-max" : "w-full")}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ScrollBar({
|
|
className: _className,
|
|
orientation: _orientation = "vertical",
|
|
..._props
|
|
}) {
|
|
return null;
|
|
}
|
|
|
|
export { ScrollArea, ScrollBar }
|