From 02478acb3f400cc018f349478fe828c09793dcb8 Mon Sep 17 00:00:00 2001
From: ZouicheOmar <zouiche.dev.omar@gmail.com>
Date: Fri, 18 Apr 2025 17:02:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20emoji=20picker=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a custom emoji picker component to use in the editor
---
 .../doc-editor/components/EmojiPicker.tsx     | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
new file mode 100644
index 00000000..f2ff859b
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
@@ -0,0 +1,43 @@
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '@/components';
+
+interface EmojiPickerProps {
+  categories: string[];
+  custom: {
+    name: string;
+    id: string;
+    emojis: string[];
+  }[];
+  onClickOutside: () => void;
+  onEmojiSelect: ({ native }: { native: string }) => void;
+}
+
+export const EmojiPicker = ({
+  categories,
+  custom,
+  onClickOutside,
+  onEmojiSelect,
+}: EmojiPickerProps) => {
+  const { i18n } = useTranslation();
+
+  return (
+    <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
+      <Picker
+        categories={categories}
+        custom={custom}
+        data={data}
+        locale={i18n.resolvedLanguage}
+        navPosition="none"
+        onClickOutside={onClickOutside}
+        onEmojiSelect={onEmojiSelect}
+        previewPosition="none"
+        skinTonePosition="none"
+        theme="light"
+      />
+    </Box>
+  );
+};