feat: annotation management frontend (#1764)

web/app/components/base/modal/delete-confirm-modal/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import s from './style.module.css'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+
+type Props = {
+  isShow: boolean
+  onHide: () => void
+  onRemove: () => void
+  text?: string
+  children?: JSX.Element
+}
+
+const DeleteConfirmModal: FC<Props> = ({
+  isShow,
+  onHide,
+  onRemove,
+  children,
+  text,
+}) => {
+  const { t } = useTranslation()
+  if (!isShow)
+    return null
+
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onHide}
+      wrapperClassName='z-50'
+      className={cn(s.delModal, 'z-50')}
+      closable
+    >
+      <div onClick={(e) => {
+        e.stopPropagation()
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+      }}>
+        <div className={s.warningWrapper}>
+          <AlertCircle className='w-6 h-6 text-red-600' />
+        </div>
+        {text
+          ? (
+            <div className='text-xl font-semibold text-gray-900 mb-3'>{text}</div>
+          )
+          : children}
+
+        <div className='flex gap-2 justify-end'>
+          <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+          <Button
+            type='warning'
+            onClick={onRemove}
+            className='border-red-700 border-[0.5px]'
+          >
+            {t('common.operation.sure')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(DeleteConfirmModal)

web/app/components/base/modal/delete-confirm-modal/style.module.css

@@ -0,0 +1,16 @@
+.delModal {
+  background: linear-gradient(180deg,
+      rgba(217, 45, 32, 0.05) 0%,
+      rgba(217, 45, 32, 0) 24.02%),
+    #f9fafb;
+  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  @apply rounded-2xl p-8;
+}
+
+.warningWrapper {
+  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  background: rgba(255, 255, 255, 0.9);
+  @apply h-12 w-12 border-[0.5px] border-gray-100 rounded-xl mb-3 flex items-center justify-center;
+}

web/app/components/base/modal/index.tsx

@@ -63,8 +63,13 @@ export default function Modal({
                   {description}
                 </Dialog.Description>}
                 {closable
-                  && <div className='absolute top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'>
-                    <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
+                  && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'>
+                    <XMarkIcon className='w-4 h-4 text-gray-500' onClick={
+                      (e) => {
+                        e.stopPropagation()
+                        onClose()
+                      }
+                    } />
                   </div>}
                 {children}
               </Dialog.Panel>