yaak-mountain-loop/src-web/components/DropMarker.tsx

import classNames from "classnames";
import type { CSSProperties } from "react";
import { memo } from "react";

interface Props {
  className?: string;
  style?: CSSProperties;
  orientation?: "horizontal" | "vertical";
}

export const DropMarker = memo(
  function DropMarker({ className, style, orientation = "horizontal" }: Props) {
    return (
      <div
        style={style}
        className={classNames(
          className,
          "absolute pointer-events-none z-50",
          orientation === "horizontal" && "w-full",
          orientation === "vertical" && "w-0 top-0 bottom-0",
        )}
      >
        <div
          className={classNames(
            "absolute bg-primary rounded-full",
            orientation === "horizontal" && "left-2 right-2 -bottom-[0.1rem] h-[0.2rem]",
            orientation === "vertical" && "-left-[0.1rem] top-0 bottom-0 w-[0.2rem]",
          )}
        />
      </div>
    );
  },
  () => true,
);