feat: first commit

src/components/overlay/index.less

@@ -0,0 +1,18 @@
+@import '@/styles/variables.less';
+
+.overlay {
+  &__container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    background: @blMaskBg;
+  }
+
+  &__content {
+    width: fit-content;
+    height: fit-content;
+  }
+}

src/components/overlay/index.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import { PropsWithChildren, useCallback } from 'react';
+
+import './index.less';
+
+interface IProps extends PropsWithChildren {
+  visible: boolean;
+  onClickOuter: () => void;
+  outerClassName?: string;
+  innerClassName?: string;
+}
+
+const PREFIX = 'overlay';
+
+function Overlay(props: IProps) {
+  const { visible, outerClassName, innerClassName, onClickOuter } = props;
+
+  const onClickContent = useCallback((e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation(), []);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(`${PREFIX}__container`, outerClassName)} onClick={onClickOuter}>
+      <div className={classNames(`${PREFIX}__content`, innerClassName)} onClick={onClickContent}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export default Overlay;