From 54f5d0228afe02eb7e119f9c43ef901e98e2de97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Fri, 19 May 2023 18:21:11 +0800
Subject: [PATCH] feat: create support icon

---
 web/app/components/explore/app-list/index.tsx |  6 ++---
 .../explore/create-app-modal/index.tsx        | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index b1d57b804c..0e8dc4c780 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -46,13 +46,13 @@ const Apps: FC = ({ }) => {
 
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
-  const onCreate = async ({name}: any) => {
+  const onCreate = async ({name, icon, icon_background}: any) => {
     const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
     
     createApp({
       name,
-      icon: '', // TODO
-      icon_background: '', // TODO
+      icon,
+      icon_background,
       mode: currApp?.app.mode as any,
       config: model_config,
     })
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 05f58e4ff5..5053d96bbf 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -1,11 +1,13 @@
 'use client'
-import React from 'react'
+import React, { useState } from 'react'
+import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
+import EmojiPicker from '@/app/components/base/emoji-picker'
 
-import cn from 'classnames'
 import s from './style.module.css'
 
 type IProps = {
@@ -25,6 +27,9 @@ const CreateAppModal = ({
 
   const [name, setName] = React.useState('')
 
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [emoji, setEmoji] = useState({ icon: '🍌', icon_background: '#FFEAD5' })
+
   const submit = () => {
     if(!name.trim()) {
       Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
@@ -32,11 +37,13 @@ const CreateAppModal = ({
     }
     onConfirm({
       name,
+      ...emoji,
     })
     onHide()
   }
 
   return (
+    <>
     <Modal
       isShow={show}
       onClose={onHide}
@@ -47,7 +54,7 @@ const CreateAppModal = ({
       <div className={s.content}>
         <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
         <div className='flex items-center justify-between space-x-3'>
-          <div className='w-10 h-10 rounded-lg bg-[#EFF1F5]'></div>
+          <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
           <input 
             value={name}
             onChange={e => setName(e.target.value)}
@@ -60,6 +67,19 @@ const CreateAppModal = ({
         <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
       </div>
     </Modal>
+    {showEmojiPicker && <EmojiPicker
+      onSelect={(icon, icon_background) => {
+        console.log(icon, icon_background)
+        setEmoji({ icon, icon_background })
+        setShowEmojiPicker(false)
+      }}
+      onClose={() => {
+        setEmoji({ icon: '🍌', icon_background: '#FFEAD5' })
+        setShowEmojiPicker(false)
+      }}
+    />}
+    </>
+    
   )
 }