From 522d8f14a406da12bfc71577c4a16d741db74f88 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Fri, 20 Jun 2025 16:02:18 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BF=D0=B8=D0=BA=D0=B5=D1=80=20=D1=8D=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B6=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D1=81=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=BE=20=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewPublicationPage.tsx                   |  3 +
 .../questions/Emoji/EmojiPicker.tsx           | 49 +++++++++++++
 .../questions/Emoji/EmojiVariant.tsx          | 23 +++---
 .../questions/Emoji/OwnEmojiPicker.tsx        | 71 +++++++++++++++++++
 yarn.lock                                     |  2 +-
 5 files changed, 138 insertions(+), 10 deletions(-)
 create mode 100644 lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx
 create mode 100644 lib/components/ViewPublicationPage/questions/Emoji/OwnEmojiPicker.tsx

diff --git a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
index 70763eb..73e64d2 100644
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
@@ -19,6 +19,9 @@ import NextButton from "./tools/NextButton";
 import PrevButton from "./tools/PrevButton";
 import unscreen from "@/ui_kit/unscreen";
 import { useQuizStore } from "@/stores/useQuizStore";
+import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
+
+polyfillCountryFlagEmojis();
 
 export default function ViewPublicationPage() {
   const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizStore();
diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx
new file mode 100644
index 0000000..4d960a6
--- /dev/null
+++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx
@@ -0,0 +1,49 @@
+import EmojiPickerOriginal from "@emoji-mart/react";
+import { Box } from "@mui/material";
+
+type Emoji = {
+  emoticons: string[];
+  id: string;
+  keywords: string[];
+  name: string;
+  native: string;
+  shortcodes: string;
+  unified: string;
+};
+
+type EmojiPickerProps = {
+  onEmojiSelect: (emoji: Emoji) => void;
+};
+
+export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => (
+  <Box sx={{ minWidth: "352px" }}>
+    <EmojiPickerOriginal
+      onEmojiSelect={onEmojiSelect}
+      theme="light"
+      locale="ru"
+      exceptEmojis={ignoreEmojis}
+    />
+  </Box>
+);
+
+const ignoreEmojis = [
+  "two_men_holding_hands",
+  "two_women_holding_hands",
+  "man-kiss-man",
+  "woman-kiss-woman",
+  "man-heart-man",
+  "woman-heart-woman",
+  "man-man-boy",
+  "man-man-girl",
+  "man-man-girl-boy",
+  "man-man-girl-girl",
+  "man-man-boy-boy",
+  "woman-woman-boy",
+  "woman-woman-girl",
+  "woman-woman-girl-boy",
+  "woman-woman-girl-girl",
+  "woman-woman-boy-boy",
+  "rainbow-flag",
+  "transgender_flag",
+  "transgender_symbol",
+];
diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
index 081de0a..8512745 100644
--- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
@@ -18,6 +18,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import type { MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
+import { OwnEmojiPicker } from "./OwnEmojiPicker";
 
 polyfillCountryFlagEmojis();
 
@@ -165,15 +166,19 @@ export const EmojiVariant = ({
           cursor: "pointer",
         }}
       >
-        <Box
-          sx={{
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-          }}
-        >
-          {variant.extendedText && <Typography fontSize="100px">{variant.extendedText}</Typography>}
-        </Box>
+        {own ? (
+          <OwnEmojiPicker emoji={variant.extendedText} />
+        ) : (
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            {variant.extendedText && <Typography fontSize="100px">{variant.extendedText}</Typography>}
+          </Box>
+        )}
       </Box>
       {own && (
         <Typography
diff --git a/lib/components/ViewPublicationPage/questions/Emoji/OwnEmojiPicker.tsx b/lib/components/ViewPublicationPage/questions/Emoji/OwnEmojiPicker.tsx
new file mode 100644
index 0000000..00b3ab8
--- /dev/null
+++ b/lib/components/ViewPublicationPage/questions/Emoji/OwnEmojiPicker.tsx
@@ -0,0 +1,71 @@
+import { Box, ButtonBase, Typography, useTheme, Modal } from "@mui/material";
+import { useState } from "react";
+import { EmojiPicker } from "./EmojiPicker";
+
+interface Props {
+  emoji: string;
+  onEmojiSelect?: (emoji: string) => void;
+}
+
+export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => {
+  const theme = useTheme();
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const handleEmojiSelect = (emojiData: any) => {
+    onEmojiSelect?.(emojiData.native);
+    setIsPickerOpen(false);
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsPickerOpen(true);
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsPickerOpen(false);
+  };
+
+  return (
+    <>
+      <ButtonBase
+        onClick={handleClick}
+        sx={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "&:hover": {
+            bgcolor: theme.palette.grey[100],
+          },
+        }}
+      >
+        <Typography fontSize="100px">{emoji}</Typography>
+      </ButtonBase>
+
+      <Modal
+        open={isPickerOpen}
+        onClose={handleClose}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        keepMounted
+      >
+        <Box
+          onClick={(e) => e.stopPropagation()}
+          sx={{
+            bgcolor: "background.paper",
+            borderRadius: 2,
+            p: 2,
+            boxShadow: 24,
+          }}
+        >
+          <EmojiPicker onEmojiSelect={handleEmojiSelect} />
+        </Box>
+      </Modal>
+    </>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 78c6749..29948a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -275,7 +275,7 @@
 
 "@emoji-mart/react@^1.1.1":
   version "1.1.1"
-  resolved "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz"
+  resolved "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
   integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
 
 "@emotion/babel-plugin@^11.11.0":