добавлен пикер эмоджи для своего ответа

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();

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",
+];

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

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>
+    </>
+  );
+};

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":