|
|
|
@@ -18,6 +18,9 @@ type IShareLinkProps = { |
|
|
|
onGenerateCode: () => Promise<void> |
|
|
|
linkUrl: string |
|
|
|
} |
|
|
|
|
|
|
|
const prefixShare = 'appOverview.overview.appInfo.share' |
|
|
|
|
|
|
|
const ShareLinkModal: FC<IShareLinkProps> = ({ |
|
|
|
linkUrl, |
|
|
|
isShow, |
|
|
|
@@ -25,35 +28,37 @@ const ShareLinkModal: FC<IShareLinkProps> = ({ |
|
|
|
onGenerateCode, |
|
|
|
}) => { |
|
|
|
const [genLoading, setGenLoading] = useState(false) |
|
|
|
const [isCopied, setIsCopied] = useState(false) |
|
|
|
const { t } = useTranslation() |
|
|
|
return <Modal |
|
|
|
title={t('appOverview.overview.appInfo.share.explanation')} |
|
|
|
title={t(`${prefixShare}.explanation`)} |
|
|
|
isShow={isShow} |
|
|
|
onClose={onClose} |
|
|
|
> |
|
|
|
{/* share url */} |
|
|
|
<p className='mt-5 text-xs font-medium text-gray-500'>{t('appOverview.overview.appInfo.share.shareUrl')}</p> |
|
|
|
<p className='mt-5 text-xs font-medium text-gray-500'>{t(`${prefixShare}.shareUrl`)}</p> |
|
|
|
{/* input share url */} |
|
|
|
<input disabled type='text' value={linkUrl} className='mt-1 w-full bg-gray-50 p-2 text-primary-600 text-xs font-normal outline-gray-50 hover:outline-gray-50 cursor-pointer' /> |
|
|
|
{/* button copy link/ button regenerate */} |
|
|
|
<div className='mt-4 flex gap-3'> |
|
|
|
<Button |
|
|
|
type="primary" |
|
|
|
className='w-32' |
|
|
|
className='w-32 !px-0' |
|
|
|
onClick={() => { |
|
|
|
copy(linkUrl) |
|
|
|
copy(linkUrl) && setIsCopied(true) |
|
|
|
}} |
|
|
|
> |
|
|
|
<LinkIcon className='w-4 h-4 mr-2' /> |
|
|
|
{t('appOverview.overview.appInfo.share.copyLink')} |
|
|
|
{ t(`${prefixShare}.${isCopied ? 'linkCopied' : 'copyLink'}`) } |
|
|
|
</Button> |
|
|
|
<Button className='w-32' onClick={async () => { |
|
|
|
<Button className='w-32 !px-0' onClick={async () => { |
|
|
|
setGenLoading(true) |
|
|
|
await onGenerateCode() |
|
|
|
setGenLoading(false) |
|
|
|
setIsCopied(false) |
|
|
|
}}> |
|
|
|
<ArrowPathIcon className={`w-4 h-4 mr-2 ${genLoading ? 'generateLogo' : ''}`} /> |
|
|
|
{t('appOverview.overview.appInfo.share.regenerate')} |
|
|
|
{t(`${prefixShare}.regenerate`)} |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</Modal> |