feat(FE-40): create ConfirmationModal component

2026-05-20 13:32:00 +00:00 · 2025-10-04 12:17:17 +07:00
parent ae159b9617
commit 78750060de
1 changed files with 124 additions and 0 deletions
@@ -0,0 +1,124 @@
+'use client';
+
+import { RefObject } from 'react';
+
+import { Icon } from '@iconify/react';
+import Modal from '@/components/Modal';
+import Button from '@/components/Button';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface ConfirmationModalProps {
+  ref: RefObject<HTMLDialogElement | null>;
+  type?: 'info' | 'success' | 'error';
+  text?: string;
+  closeOnBackdrop?: boolean;
+  primaryButton?: {
+    text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
+  };
+  secondaryButton?: {
+    text?: string;
+    color?: Color;
+    isLoading?: boolean;
+    onClick?: () => void;
+  };
+  className?: {
+    modal?: string;
+    modalBox?: string;
+  };
+}
+
+const ConfirmationModal = ({
+  ref,
+  type = 'info',
+  text,
+  closeOnBackdrop,
+  primaryButton,
+  secondaryButton,
+  className,
+}: ConfirmationModalProps) => {
+  const closeModalHandler = () => {
+    ref.current?.close();
+  };
+
+  return (
+    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
+      <div className='w-full flex flex-col gap-4'>
+        <div
+          className={cn(
+            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
+            {
+              'bg-error': type === 'error',
+              'bg-info': type === 'info',
+              'bg-success': type === 'success',
+            }
+          )}
+        >
+          {type === 'info' && (
+            <Icon
+              icon='material-symbols:info-outline-rounded'
+              width={64}
+              height={64}
+              className='text-info-content'
+            />
+          )}
+
+          {type === 'success' && (
+            <Icon
+              icon='qlementine-icons:success-12'
+              width={64}
+              height={64}
+              className='text-success-content'
+            />
+          )}
+
+          {type === 'error' && (
+            <Icon
+              icon='solar:danger-triangle-linear'
+              width={64}
+              height={64}
+              className='text-error-content'
+            />
+          )}
+        </div>
+
+        <p className='text-center font-medium'>
+          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+        </p>
+
+        <div className='w-full flex flex-row gap-2'>
+          {secondaryButton && secondaryButton.text && (
+            <Button
+              variant='ghost'
+              color={secondaryButton?.color ?? 'none'}
+              isLoading={secondaryButton?.isLoading}
+              disabled={secondaryButton?.isLoading}
+              onClick={closeModalHandler}
+              className='grow'
+            >
+              {secondaryButton?.text ?? 'Tidak'}
+            </Button>
+          )}
+
+          {primaryButton && primaryButton.text && (
+            <Button
+              color={primaryButton?.color ?? 'info'}
+              onClick={primaryButton?.onClick}
+              isLoading={primaryButton?.isLoading}
+              disabled={primaryButton?.isLoading}
+              className='grow'
+            >
+              {primaryButton?.text ?? 'Ya'}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;