zebflow 0.6.1

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { cx } from "zeb";

interface ScrollAreaProps {
  className?: string;
  children?: any;
  [key: string]: any;
}

interface ScrollBarProps {
  orientation?: "vertical" | "horizontal";
  className?: string;
  [key: string]: any;
}

export function ScrollArea({ className, children, ...rest }: ScrollAreaProps) {
  return (
    <div
      className={cx("relative overflow-hidden", className)}
      {...rest}
    >
      <div className="h-full w-full overflow-auto [scrollbar-width:thin] [scrollbar-color:rgb(203_213_225)_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300">
        {children}
      </div>
    </div>
  );
}

export function ScrollBar({ orientation = "vertical", className, ...rest }: ScrollBarProps) {
  return (
    <div
      className={cx(
        "flex touch-none select-none transition-colors",
        orientation === "vertical" ? "h-full w-2.5 border-l border-l-transparent p-[1px]" : "h-2.5 flex-col border-t border-t-transparent p-[1px]",
        className
      )}
      {...rest}
    />
  );
}

export default ScrollArea;