changed reward on button

src/components/feed/RewardPopup.jsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Всплывающее окно с текстом вознаграждения (rewardText).
+ * Открывается под/рядом с кнопкой-якорем, закрывается по клику мимо или Esc.
+ */
+export default function RewardPopup({ text, anchorRef, onClose }) {
+  const { t } = useTranslation();
+  const ref = useRef(null);
+  const [coords, setCoords] = useState(null);
+
+  useLayoutEffect(() => {
+    if (!anchorRef?.current || !ref.current) return;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const popupRect = ref.current.getBoundingClientRect();
+    const gap = 8;
+    const margin = 10;
+
+    // Всплываем слева сверху от кнопки (как календарь): низ попапа — у верха якоря,
+    // правая грань попапа выравнивается по правой грани кнопки.
+    let top = anchorRect.top + window.scrollY - popupRect.height - gap;
+    const minTop = window.scrollY + margin;
+    if (top < minTop) top = minTop;
+
+    let left = anchorRect.right + window.scrollX - popupRect.width;
+    const minLeft = window.scrollX + margin;
+    if (left < minLeft) left = minLeft;
+
+    setCoords({ top, left });
+  }, [anchorRef]);
+
+  useEffect(() => {
+    const onDown = (e) => {
+      const inAnchor = anchorRef?.current?.contains(e.target);
+      const inPopup = ref.current?.contains(e.target);
+      if (!inAnchor && !inPopup) onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [onClose, anchorRef]);
+
+  return createPortal(
+      <div
+          className="f-reward-popup"
+          ref={ref}
+          role="tooltip"
+          style={{
+            position: "absolute",
+            top: coords?.top ?? 0,
+            left: coords?.left ?? 0,
+            zIndex: 1000,
+            visibility: coords ? "visible" : "hidden",
+          }}
+      >
+        <div className="f-reward-popup-title">💛 {t("postCard.reward")}</div>
+        <div className="f-reward-popup-text">{text}</div>
+      </div>,
+      document.body
+  );
+}