You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
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 cn from 'classnames'
|
|
import s from './style.module.css'
|
|
|
|
type IProps = {
|
|
appName: string,
|
|
show: boolean,
|
|
onConfirm: (info: any) => void,
|
|
onHide: () => void,
|
|
}
|
|
|
|
const CreateAppModal = ({
|
|
appName,
|
|
show = false,
|
|
onConfirm,
|
|
onHide,
|
|
}: IProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
const [name, setName] = React.useState('')
|
|
|
|
const submit = () => {
|
|
if(!name.trim()) {
|
|
Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
|
|
return
|
|
}
|
|
onConfirm({
|
|
name,
|
|
})
|
|
onHide()
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
isShow={show}
|
|
onClose={onHide}
|
|
className={cn(s.modal, '!max-w-[480px]', 'px-8')}
|
|
>
|
|
<span className={s.close} onClick={onHide}/>
|
|
<div className={s.title}>{t('explore.appCustomize.title', {name: appName})}</div>
|
|
<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>
|
|
<input
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row-reverse'>
|
|
<Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
|
|
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default CreateAppModal
|