diff --git a/package.json b/package.json index 9f5c7e7a..fb179ed5 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@tamagui/vite-plugin": "1.36.4", "@types/react": "18", "@types/react-dom": "18", + "emoji-picker-react": "^4.4.11", "expo-modules-core": "^1.5.9", "react": "18", "react-color": "^2.19.3", diff --git a/src/components/General/EmojiPicker.tsx b/src/components/General/EmojiPicker.tsx new file mode 100644 index 00000000..6cc6c1a8 --- /dev/null +++ b/src/components/General/EmojiPicker.tsx @@ -0,0 +1,67 @@ +import { Text } from '@status-im/components' +import EmojiPicker, { + EmojiStyle, + Theme, + EmojiClickData, + Emoji, + SuggestionMode, + Categories, +} from 'emoji-picker-react' +import { useState } from 'react' +import { Stack, XStack } from 'tamagui' + +function EmojiPickerDialog() { + const [selectedEmoji, setSelectedEmoji] = useState('') + + function onClick(emojiData: EmojiClickData) { + setSelectedEmoji(emojiData.unified) + } + + return ( + + Emoji Picker Demo + + Your selected Emoji is: + {selectedEmoji ? ( + + ) : null} + + + + + ) +} +export default EmojiPickerDialog diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 1a17ce81..411af0e9 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -6,6 +6,7 @@ import { Button as StatusButton } from '@status-im/components' import NimbusLogo from '../../components/Logos/NimbusLogo' import { XStack, YStack } from 'tamagui' import { NodeIcon } from '@status-im/icons' +import EmojiPickerDialog from '../../components/General/EmojiPicker' function LandingPage() { return ( @@ -24,6 +25,7 @@ function LandingPage() { }>Get Started + diff --git a/yarn.lock b/yarn.lock index 7d92fd5a..6ad42e19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8588,6 +8588,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" @@ -9537,6 +9544,17 @@ __metadata: languageName: node linkType: hard +"emoji-picker-react@npm:^4.4.11": + version: 4.4.11 + resolution: "emoji-picker-react@npm:4.4.11" + dependencies: + clsx: ^1.2.1 + peerDependencies: + react: ">=16" + checksum: 69ec9468996a5b0a277fd7821156695af7d097f5f4d6da7c4286181bce5edc36e888f52be4b22f342a84bc9b99e7f71ee69e9079a69f0c58404aeccba8c85ab8 + languageName: node + linkType: hard + "emoji-regex@npm:^8.0.0": version: 8.0.0 resolution: "emoji-regex@npm:8.0.0" @@ -13842,6 +13860,7 @@ __metadata: "@typescript-eslint/eslint-plugin": ^6.0.0 "@typescript-eslint/parser": ^6.0.0 "@vitejs/plugin-react": ^4.0.3 + emoji-picker-react: ^4.4.11 eslint: ^8.45.0 eslint-plugin-react-hooks: ^4.6.0 eslint-plugin-react-refresh: ^0.4.3