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) => (
+
+
+
+);
+
+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",
}}
>
-
- {variant.extendedText && {variant.extendedText}}
-
+ {own ? (
+
+ ) : (
+
+ {variant.extendedText && {variant.extendedText}}
+
+ )}
{own && (
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 (
+ <>
+
+ {emoji}
+
+
+
+ e.stopPropagation()}
+ sx={{
+ bgcolor: "background.paper",
+ borderRadius: 2,
+ p: 2,
+ boxShadow: 24,
+ }}
+ >
+
+
+
+ >
+ );
+};
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":