yaak-mountain-loop/src-web/components/core/Separator.tsx

import type { Color } from "@yaakapp-internal/plugins";
import classNames from "classnames";
import type { ReactNode } from "react";

interface Props {
  orientation?: "horizontal" | "vertical";
  dashed?: boolean;
  className?: string;
  children?: ReactNode;
  color?: Color;
}

export function Separator({
  color,
  className,
  dashed,
  orientation = "horizontal",
  children,
}: Props) {
  return (
    <div role="presentation" className={classNames(className, "flex items-center w-full")}>
      {children && (
        <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
      )}
      <div
        className={classNames(
          "h-0 border-t opacity-60",
          color == null && "border-border",
          color === "primary" && "border-primary",
          color === "secondary" && "border-secondary",
          color === "success" && "border-success",
          color === "notice" && "border-notice",
          color === "warning" && "border-warning",
          color === "danger" && "border-danger",
          color === "info" && "border-info",
          dashed && "border-dashed",
          orientation === "horizontal" && "w-full h-[1px]",
          orientation === "vertical" && "h-full w-[1px]",
        )}
      />
    </div>
  );
}