From 768a62cc4f88bf22119b7f7697bf51795fbc8710 Mon Sep 17 00:00:00 2001
From: crazywoola <li.zheng@dentsplysirona.com>
Date: Wed, 17 May 2023 16:33:50 +0800
Subject: [PATCH] feat: emoji-picker

---
 web/app/(commonLayout)/apps/Apps.tsx          |   4 +-
 .../components/base/emoji-picker/index.tsx    | 155 ++++++++++++++++++
 .../base/emoji-picker/style.module.css        |  12 ++
 web/package.json                              |   2 +
 4 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/emoji-picker/index.tsx
 create mode 100644 web/app/components/base/emoji-picker/style.module.css

diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index b11b0da6a0..3c6c3458ce 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
 import { useAppContext } from '@/context/app-context'
-
+import EmojiPicker from '@/app/components/base/emoji-picker'
 const Apps = () => {
   const { apps, mutateApps } = useAppContext()
 
@@ -13,10 +13,12 @@ const Apps = () => {
   }, [])
 
   return (
+    <>
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
       {apps.map(app => (<AppCard key={app.id} app={app} />))}
       <NewAppCard />
     </nav>
+    <EmojiPicker /></>
   )
 }
 
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
new file mode 100644
index 0000000000..ee8e4476fb
--- /dev/null
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'em-emoji': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+import data from '@emoji-mart/data'
+import { init } from 'emoji-mart'
+
+// import AppIcon from '@/app/components/base/app-icon'
+import cn from 'classnames'
+
+import Button from '@/app/components/base/button'
+import s from './style.module.css'
+import { useState, FC } from 'react'
+import {
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline'
+import React from 'react'
+
+init({ data })
+
+const backgroundColors = [
+  '#FFEAD5',
+  '#E4FBCC',
+  '#D3F8DF',
+  '#E0F2FE',
+
+  '#E0EAFF',
+  '#EFF1F5',
+  '#FBE8FF',
+  '#FCE7F6',
+
+  '#FEF7C3',
+  '#E6F4D7',
+  '#D5F5F6',
+  '#D1E9FF',
+
+  '#D1E0FF',
+  '#D5D9EB',
+  '#ECE9FE',
+  '#FFE4E8',
+]
+
+interface IColorSelectProps {
+  selectedEmoji: string
+  onSelect: (color: string) => void
+}
+const ColorSelect: FC<IColorSelectProps> = (
+  { selectedEmoji, onSelect }
+) => {
+  const [selectBackground, setSelectBackground] = useState(backgroundColors[0]);
+  return <div className='flex flex-col p-3 border-b border-gray-100'>
+
+    <p className='font-medium uppercase text-xs text-[#101828] mb-1'>Choose Style</p>
+    <div className='w-full h-full grid grid-cols-8 gap-1'>
+      {backgroundColors.map((color) => {
+        return <div
+          key={color}
+          className={
+            cn(
+              'cursor-pointer',
+              `ring-[${color}] hover:ring-1 ring-offset-1`,
+              'inline-flex w-10 h-10 rounded-lg items-center justify-center',
+              color === selectBackground ? `ring-1 ` : '',
+            )}
+          onClick={() => {
+            setSelectBackground(color)
+            onSelect(color)
+          }}
+        >
+          <div className={cn(
+            'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
+          )
+          } style={{ background: color }}>
+            <em-emoji id={selectedEmoji} />
+          </div>
+        </div>
+      })}
+    </div>
+  </div>
+}
+interface IEmojiSelectProps {
+  onSelect?: (emoji: any) => void
+}
+
+const EmojiSelect: FC<IEmojiSelectProps> = ({
+  onSelect
+}) => {
+
+  const { categories, emojis } = data as any
+  console.log(categories, emojis);
+  return <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto">
+    {categories.map((category: any) => {
+      return <div key={category.id} className='flex flex-col'>
+        <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
+        <div className='w-full h-full grid grid-cols-8 gap-1'>
+          {category.emojis.map((emoji: any) => {
+            return <div
+              key={emoji.id}
+              className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+              onClick={() => {
+                onSelect && onSelect(emoji)
+              }}
+            >
+              <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
+                <em-emoji id={emoji} />
+              </div>
+            </div>
+          })}
+
+        </div>
+      </div>
+    })}
+  </div>
+}
+
+const EmojiPicker: FC = () => {
+  const [selectedEmoji, setSelectedEmoji] = useState('')
+  const [selectBackground, setSelectBackground] = useState('')
+
+  const Elem = () => {
+    return <div className={cn(s.container, 'gap-2 bg-white')} >
+      <div className='flex flex-col items-center w-full p-3'>
+        <div className="relative w-full">
+          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+          </div>
+          <input type="search" id="search" className="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 " placeholder="Search" />
+        </div>
+        <EmojiSelect onSelect={(itm) => {
+          setSelectedEmoji(itm)
+        }} />
+      </div>
+      <ColorSelect selectedEmoji={selectedEmoji} onSelect={color => setSelectBackground(color)} />
+      <div className='w-full flex items-center justify-center p-3'>
+        <Button type="primary" className='w-full' onClick={() => { }}>
+          OK
+        </Button>
+      </div>
+    </div>
+  }
+
+  return <>
+    <Elem />
+  </>
+}
+export default EmojiPicker
diff --git a/web/app/components/base/emoji-picker/style.module.css b/web/app/components/base/emoji-picker/style.module.css
new file mode 100644
index 0000000000..5facb3560a
--- /dev/null
+++ b/web/app/components/base/emoji-picker/style.module.css
@@ -0,0 +1,12 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 362px;
+    max-height: 552px;
+
+    border: 0.5px solid #EAECF0;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    border-radius: 12px;
+    background: #fff;
+}
diff --git a/web/package.json b/web/package.json
index c9138c20fe..1037ee6f67 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
     "fix": "next lint --fix"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
     "@formatjs/intl-localematcher": "^0.2.32",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
@@ -33,6 +34,7 @@
     "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
     "echarts-for-react": "^3.0.2",
+    "emoji-mart": "^5.5.2",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "i18next": "^22.4.13",