added notes menu

src/components/comment/CommentMenu/index.tsx

@@ -1,8 +1,6 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useMemo } from 'react';
 
-import { MenuDots } from '~/components/common/MenuDots';
-
-import styles from './styles.module.scss';
+import { CornerMenu } from '~/components/common/CornerMenu';
 
 interface IProps {
   onEdit: () => void;
@@ -10,27 +8,18 @@ interface IProps {
 }
 
 const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
-  const [is_menu_opened, setIsMenuOpened] = useState(false);
-
-  const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
-  const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
-
-  return (
-    <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
-      <MenuDots onClick={onFocus} />
-
-      {is_menu_opened && (
-        <div className={styles.menu}>
-          <div className={styles.item} onMouseDown={onEdit}>
-            Редактировать
-          </div>
-          <div className={styles.item} onMouseDown={onDelete}>
-            Удалить
-          </div>
-        </div>
-      )}
-    </div>
+  const actions = useMemo(
+    () => [
+      {
+        title: 'Редактировать',
+        action: onEdit,
+      },
+      { title: 'Удалить', action: onDelete },
+    ],
+    [onEdit, onDelete]
   );
+
+  return <CornerMenu actions={actions} />;
 };
 
 export { CommentMenu };