Feat: Add FileUploadDialog #3221 (#4327) (#4335)

### What problem does this PR solve?

Feat: Add ConfirmDeleteDialog #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/confirm-delete-dialog.tsx

@@ -0,0 +1,50 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Trash2 } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface IProps {
+  title?: string;
+  onOk?: (...args: any[]) => any;
+  onCancel?: (...args: any[]) => any;
+}
+
+export function ConfirmDeleteDialog({
+  children,
+  title,
+}: IProps & PropsWithChildren) {
+  const { t } = useTranslation();
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {title ?? t('common.deleteModalTitle')}
+          </AlertDialogTitle>
+          {/* <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription> */}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+          <AlertDialogAction className="bg-colors-background-functional-solid-danger text--colors-text-neutral-strong">
+            <Trash2 />
+            {t('common.ok')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}