feat: add emoji picker functionality

src/components/General/CreateAvatar/CreateAvatar.tsx

@@ -6,10 +6,15 @@ import './CreateAvatar.css'
 import LabelInputField from '../LabelInputField'
 import ColorPicker from '../ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../EmojiPickerDialog'
+import { Emoji, EmojiClickData } from 'emoji-picker-react'
 
 const CreateAvatar = () => {
   const [chosenColor, setChosenColor] = useState('#2A4AF5')
   const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
+  const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
+  function changeEmoji(emojiData: EmojiClickData) {
+    setSelectedEmoji(emojiData.unified)
+  }
   return (
     <YStack my={16}>
       <XStack space>
@@ -22,7 +27,7 @@ const CreateAvatar = () => {
           </Text>
           <XStack my={10} alignItems={'end'}>
             <div className="device-avatar" style={{ background: chosenColor }}>
-              <img src="./icons/nodes-app-icon.png" alt="" />
+              {selectedEmoji ? <Emoji unified={selectedEmoji} size={30} /> : null}
             </div>
             <Avatar
               type="icon"
@@ -35,7 +40,9 @@ const CreateAvatar = () => {
                 />
               }
             />
-            {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
+            {isEmojiDialogOpen && (
+              <EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
+            )}
           </XStack>
         </YStack>
         <YStack flexWrap="wrap" width="80%">

src/components/General/EmojiPickerDialog.tsx

@@ -5,33 +5,24 @@ import EmojiPicker, {
   SuggestionMode,
   Categories,
 } from 'emoji-picker-react'
-import { useState } from 'react'
 import { Stack } from 'tamagui'
 
 type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
 
-function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) {
-  const [selectedEmoji, setSelectedEmoji] = useState<string>('')
-  console.log(selectedEmoji)
-  function onClick(emojiData: EmojiClickData) {
-    setSelectedEmoji(emojiData.unified)
-  }
+type EmojiPickerProps = {
+  emojiStyle: EmojiStyleType
+  changeEmoji: (emojiData: EmojiClickData) => void
+}
 
+function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
   return (
-    <Stack position="absolute" zIndex={1} left={120}>
-      {/* <XStack>
-        Your selected Emoji is:
-        {selectedEmoji ? (
-          <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
-        ) : null}
-      </XStack> */}
-
+    <Stack position="absolute" zIndex={1} left={100}>
       <EmojiPicker
-        onEmojiClick={onClick}
+        onEmojiClick={changeEmoji}
         autoFocusSearch={false}
         theme={Theme.AUTO}
         height={350}
-        width="100%"
+        width={350}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}