feat: emoji-picker

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,12 +13,11 @@ 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 /></>
+
   )
 }
 

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -9,7 +9,6 @@ import NewAppDialog from './NewAppDialog'
 const CreateAppCard = () => {
   const { t } = useTranslation()
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
-
   return (
     <a className={classNames(style.listItem, style.newItemCard)} onClick={() => setShowNewAppDialog(true)}>
       <div className={style.listItemTitle}>

web/app/(commonLayout)/apps/NewAppDialog.tsx

@@ -17,6 +17,8 @@ import { createApp, fetchAppTemplates } from '@/service/apps'
 import AppIcon from '@/app/components/base/app-icon'
 import AppsContext from '@/context/app-context'
 
+import EmojiPicker from '@/app/components/base/emoji-picker'
+
 type NewAppDialogProps = {
   show: boolean
   onClose?: () => void
@@ -31,6 +33,7 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
   const [newAppMode, setNewAppMode] = useState<AppMode>()
   const [isWithTemplate, setIsWithTemplate] = useState(false)
   const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(-1)
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
   const { data: templates, mutate } = useSWR({ url: '/app-templates' }, fetchAppTemplates)
@@ -93,10 +96,15 @@ const NewAppDialog = ({ show, onClose }: NewAppDialogProps) => {
         </>
       }
     >
+      {showEmojiPicker && <EmojiPicker onSelect={(emoji, background) => {
+        console.log(emoji, background)
+        setShowEmojiPicker(false)
+      }} />}
+
       <h3 className={style.newItemCaption}>{t('app.newApp.captionName')}</h3>
 
       <div className='flex items-center justify-between gap-3 mb-8'>
-        <AppIcon size='large' />
+        <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} />
         <input ref={nameInputRef} className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' />
       </div>
 

web/app/components/base/app-icon/index.tsx

@@ -9,6 +9,7 @@ export type AppIconProps = {
   background?: string
   className?: string
   innerIcon?: React.ReactNode
+  onClick?: () => void
 }
 
 const AppIcon: FC<AppIconProps> = ({
@@ -17,6 +18,7 @@ const AppIcon: FC<AppIconProps> = ({
   background,
   className,
   innerIcon,
+  onClick,
 }) => {
   return (
     <span
@@ -29,6 +31,7 @@ const AppIcon: FC<AppIconProps> = ({
       style={{
         background,
       }}
+      onClick={onClick}
     >
       {innerIcon ? innerIcon : <>🤖</>}
     </span>

web/app/components/base/emoji-picker/index.tsx

@@ -12,6 +12,7 @@ import {
   MagnifyingGlassIcon
 } from '@heroicons/react/24/outline'
 import React from 'react'
+import Modal from '@/app/components/base/modal'
 
 declare global {
   namespace JSX {
@@ -95,7 +96,6 @@ const EmojiSelect: FC<IEmojiSelectProps> = ({
 }) => {
 
   const { categories, emojis } = data as any
-  console.log(categories, emojis);
   return <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
     {categories.map((category: any) => {
       return <div key={category.id} className='flex flex-col'>
@@ -122,16 +122,21 @@ const EmojiSelect: FC<IEmojiSelectProps> = ({
 }
 
 interface IEmojiPickerProps {
+  isModal?: boolean
   onSelect?: (emoji: string, background: string) => void
 }
 const EmojiPicker: FC<IEmojiPickerProps> = ({
+  isModal = true,
   onSelect
 }) => {
   const [selectedEmoji, setSelectedEmoji] = useState('')
-  const [selectBackground, setSelectBackground] = useState('')
 
   const Elem = () => {
-    return <div className={cn(s.container, 'bg-white')} >
+    return isModal ? <Modal
+      onClose={() => { }}
+      isShow
+      className={cn(s.container, '!w-[362px] !p-0')}
+    >
       <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">
@@ -145,7 +150,6 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
         setSelectedEmoji(itm)
       }} />
       <ColorSelect selectedEmoji={selectedEmoji} onSelect={color => {
-        setSelectBackground(color)
         onSelect && onSelect(selectedEmoji, color)
       }} />
       <Divider className='m-0' />
@@ -154,11 +158,10 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
           OK
         </Button>
       </div>
-    </div>
+    </Modal> : <>
+    </>
   }
 
-  return <>
-    <Elem />
-  </>
+  return <Elem />
 }
 export default EmojiPicker